javascript - 自动重启/重置倒计时器

Question

我想要的是，当计时器到达结束日期和时间时，它会自动重新开始，但从 60 秒开始倒计时。我对 jquery 很陌生，我为这个问题苦苦挣扎了近 3 天，但我无法让它运行。 我的倒计时与从数据库插入的最终数据完美配合，但当它到达结束日期和时间(例如:0 天 0 小时 0 分钟 0 秒)时，它应该从 60 秒倒计时到零开始。

有人可以帮忙解决这个问题吗？下面是我使用的代码的和平。 我将它与 PHP 结合使用，因此它还将创建用于倒计时的 div。

JQUERY:

$data = '<script type="text/javascript">
$(function () {';
    foreach( $datarows as $key => $value ) { // start php foreach

    $data .= '
              $(\'#wincountdown'.$datarows[$key]['uid'].'\').countdown({ until: new Date( '. strftime( '%Y,%m - 1,%d,%H,%M',$datarows[$key]['end_bidding']).' ) }) ;
    ';
    } // end php foreach
$data .= '
});
</script>';

HTML

<div id="wincountdown<#nr#>">  </div> //build by db array

所以上面的代码片段工作正常。现在，只有在到达结束日期时，它才会自动重新启动。 所以我的问题是我如何实现这段代码来实现我想要它做的事情，或者我应该使用和添加 jquery 中的哪些函数？也许有人已经得到了一段正在做类似事情的代码并想分享它？

请问有人可以帮助我吗？如果我不够清楚，请让我更好地解释。

提前致谢。

Answer 1

使用JQuery Countdown插件。

它具有当计时器为零时可以触发的回调事件。发生这种情况时，只需重置计时器即可。

假设这是我们的 html:

<div id="shortly"></div>
<button id="shortlyStart">Start</button>

这大致就是您重置倒计时器所需的 JQuery。

// restart the timer on expiry
$('#shortly').countdown({until: shortly,  
    onExpiry: restart, onTick: watchCountdown}); 

$('#shortlyStart').click(function() { 
    // restart the timer on click
    restart();
}); 

function restart() { 
    shortly = new Date(); 
    shortly.setSeconds(shortly.getSeconds() + 5.5); 
    $('#shortly').countdown('change', {until: shortly}); 
} 

// show the timer results 
function watchCountdown(periods) { 
    $('#monitor').text('Just ' + periods[5] + ' minutes and ' + 
        periods[6] + ' seconds to go'); 
}