自动重启/重置倒数计时器 [英] Auto Restart/Reset countdown timer

问题描述

我想要的是当计时器到达结束日期和时间时它会自动重新开始，但是从60秒开始倒计时。我是jquery的新手，我和这个问题串联了将近3天，我无法让它运行。
我的倒计时与数据库中插入的最终数据完美配合，但当它到达结束日期和时间时（例如：0天0小时0分0秒），它应该从60秒开始倒计时到零。

What i want is that when the timer has reached the end-date and time it automatically start over but by counting down from 60 seconds. Im new to jquery and im strungling with this problem for almost 3 days and i cant get it running. My countdown is working perfectly with the end-data inserted from the database but when it reaches the end-date and time (eg: 0 days 0 hours 0 minutes 0 seconds) it should start by counting down from 60 seconds to zero.

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

Can someone please help with this problem? Here below a peace of my code im using. Im using it combined with PHP so it also will create the divs used for the countdowns.

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我应该使用和添加什么功能？也许有人得到了一段代码正在做类似的事情而想要分享它？

So the pieces of code above is working fine. Now it only should automatically restart when end date has been reached. So my question is how can i implement the piece of code to realise what i want it todo, or what function from jquery i should be using and adding? Maybe someone got a piece of code that is doing something like that allready and want to share it?

请有人帮帮我吗？如果我不够清楚，请让我解释得更好。

Please can someone help me? If i was not clear enough please ask me to explain better.

提前致谢。

推荐答案

使用 JQuery倒计时插件。

它有回调事件，可以在计时器达到零时触发。发生这种情况时，只需重置和计时器。

It has callback events that can be fired when the timer hits zero. When this happens, simply reset and timer.

假设这是我们的html：

Assuming this is our html:

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

这大致是你需要重置倒数计时器的JQuery。

This is roughly the JQuery you'd need to reset the countdown timer.

// 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'); 
}

这篇关于自动重启/重置倒数计时器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！