Question

在花了最后45分钟寻找解决方案之后，我似乎找不到使用PHP和jQuery创建倒数计时器的简单解决方案。我发现大多数已经构建的脚本纯粹基于jQuery，它需要大量的代码，然后它们应该有更多的参数，而且适应性非常难。

这是我的情况;

PHP：

$countdown = date("h:i:s"); // This isn't my actual $countdown variable, just a placeholder

jQuery的：

$(document).ready(function name() {
    $("#this").load( function() {  
        setTimeout("name()", 1000)
      }
    }
});

HTML：

<div id="this"><?php echo($countdown); ?></div>

我的想法是，每一秒，#this都会重新加载，为其内容提供一个新值，而$ countdown不是静态变量，每次都会加载一个新值。这消除了处理会话的需要（因为基本的javascript倒计时器会在页面加载时重置等）。

我会尽管这会有用，直到我意识到事件活页夹.load()没有重新加载#this（我知道傻我），所以我想我想知道的是 - 是否有一个事件活页夹我可以用它来完成这项工作，或者有没有办法获得我正在寻找的功能，而不使用jQuery插件（它与我想要的完全不符）？

Answer 1

你应该使用Keith Wood的倒数计时器：http://keith-wood.name/countdown.html

非常易于使用。

你所要做的就是

$('#timer').countdown({
    until: '<?php echo date("h:i:s"); ?>' // change this, obviously
});

这是小提琴：http://jsfiddle.net/tqyj4/289/

Answer 2

好的，我知道id不是变量，但不要使用this作为ID。这让人感到畏缩。

对于其余的，不要重新加载值，在PHP中用JS设置一个值，然后倒计时。

// place this in the <head> above the code below
echo "var t = " . time() . ";";
echo "var ft = " . /* your final time here */ . ";";

然后：

// this is a helper function.
function lpad( input, len, padstr )
{
    if( !padstr ) padstr = " "; // this is the normal default for pad.
    var ret = String( input );
    var dlen = ret.length - len;
    if( dlen > 0 ) return ret;
    for( var i = 0; i < dlen; i++ ) ret = padstr + ret;
    return ret;
}

$(document).ready(function name() {
    $("#timer").load( function() {  // I changed the id
        $timer = $("timer"); // might as well cache it.
        // interval, not timeout. interval repeats
        var intval = setInterval(function(){
             t += 500; // decrease the difference in time
             if( t >= ft )
             {    
                 t = ft; // prevent negative time.
                 clearInterval( intval ) // cleanup when done.
             }
             var dt = new Date(ft - t); 
             $timer.innerHTML = dt.getHours() + ":" + 
                                // pad to make sure it is always 2 digits
                                lpad( dt.getMinutes(), 2, '0' ) + ":" + 
                                lpad( dt.getSeconds(), 2, '0' );
        }, 500) // increments of .5 seconds are more accurate
      }
    }
});

Answer 3

一旦php为用户加载了特定的时间，你能解释为什么这不足以满足你的需求：

$(function(){
  $timerdiv = $("#this");

  timer();
});

function timer()
{
 $timerdiv.html((int)$timerdiv.html() - 1);
 setTimeout(timer, 1000);
}

Answer 4

您的原始代码非常接近。以下是对您的代码的修改，如下所述，或至少我认为 - 我知道它有效，但我不确定它是否符合您的要求，它们有点不清楚。显然，如果你重新加载页面，你将不得不依赖PHP输出不同，以便计数器不重置。但是请注意，我不完全确定为什么要使用.load函数 - 该函数实际上只是一个AJAX调用的包装器，用于获取另一个页面的内容并将其插入到选定的div中。我相信你正在寻找的是.html（）函数，它使用DOM中可用的内容来改变所选div的内容，而不是发出AJAX请求。

var timer;
$(document).ready(
    name();
);
function name() {
    //clear the timer
    clearTimeout(timer);
    //reset the timer
    timer = setTimeout("name()", 1000);
    //grab the current time value in the div
    var time = $("#this").html();
    //split times
    var time_splits = time.split(":");
    //add up total seconds
    var total_time = (parseInt(time_splits[0])*60*60) + (parseInt(time_splits[1])*60) + parseInt(time_splits[2]);
    //subtract 1 second from time
    total_time -= 1;
    //turn total time back in hours, minutes, and seconds
    var hours = parseInt(total_time / 3600);
    total_time %= 3600;
    var minutes = parseInt(total_time / 60);
    var seconds = total_time % 60;
    //set new time variable
    var new_time = (hours < 10 ? "0" : "") + hours + (minutes < 10 ? ":0" : ":" ) + minutes + (seconds < 10 ? ":0" : ":" ) + seconds;
    //set html to new time
    $("#this").html(new_time);
}

Answer 5

$dateFormat = “d F Y — g:i a”;
$targetDate = $futureDate;//Change the 25 to however many minutes you want to countdown change date in strtotime
$actualDate = $date1;
$secondsDiff = $targetDate – $actualDate;
$remainingDay     = floor($secondsDiff/60/60/24);
$remainingHour    = floor(($secondsDiff-($remainingDay*60*60*24))/60/60);
$remainingMinutes = floor(($secondsDiff-($remainingDay*60*60*24)-($remainingHour*60*60))/60);
$remainingSeconds = floor(($secondsDiff-($remainingDay*60*60*24)-($remainingHour*60*60))-($remainingMinutes*60));

$actualDateDisplay = date($dateFormat,$actualDate);
$targetDateDisplay = date($dateFormat,$targetDate);

<script type=”text/javascript”>
var days = <?php echo $remainingDay; ?>
var hours = <?php echo $remainingHour; ?>
var minutes = <?php echo $remainingMinutes; ?>
var seconds = <?php echo $remainingSeconds; ?>

function setCountDown(statusfun)
{//alert(seconds);
var SD;
if(days >= 0 && minutes >= 0){
var dataReturn =  jQuery.ajax({
type: “GET”,
url: “<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB).’index.php/countdowncont/’; ?>”,
async: true,
success: function(data){
var data = data.split(“/”);
day =  data[0];
hours =  data[1];
minutes =  data[2];
seconds =  data[3];

}
});
seconds–;
if (seconds < 0){
minutes–;
seconds = 59
}
if (minutes < 0){
hours–;
minutes = 59
}
if (hours < 0){
days–;
hours = 23
}
document.getElementById(“remain”).style.display = “block”;
document.getElementById(“remain”).innerHTML = ” Your Product Reverse For “+minutes+” minutes, “+seconds+” seconds”;
SD=window.setTimeout( “setCountDown()”, 1000 );
}else{
document.getElementById(“remain”).innerHTML = “”;
seconds = “00″; window.clearTimeout(SD);
jQuery.ajax({
type: “GET”,
url: “<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB).’index.php/countdown/’; ?>”,
async: false,
success: function(html){

}
});
document.getElementById(“remain”).innerHTML = “”;
window.location = document.URL; // Add your redirect url

}
}
</script>

<?php
if($date1 < $futureDate &&  ($qtyCart > 0)){ ?>
<script type=”text/javascript”>
setCountDown();
</script>
<?php }else{ ?>
<style>

#remain{display:none;}
</style>
<?php }}?>
<div id=”remain”></div>

有关详细信息，请访问urfusion

Answer 6

@epascarello为你的问题回答你需要在id中传递带有id的循环值 $（ “＃计时器<? php echo $loopval; ?>”）

并在

中调用它

<div id="timer<?php echo $loopval; ?>">
</div>

基于PHP和jQuery构建的倒数计时器？

6 个答案: