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

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

@epascarello 回答您的问题，例如，您需要在带有 id 的选择器中传递循环值 $("#timer<? php echo $loopval; ?>")

并且在

中也调用它

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

Answer 2

$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 3

您应该使用 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 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

好的，我知道 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 6

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

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

  timer();
});

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