在特定时间重新开始倒计时答案

【问题标题】：Restart countdown at specific time在特定时间重新开始倒计时
【发布时间】：2020-09-20 12:47:57
【问题描述】：

我有多个倒数计时器和一个正在运行的实时数字时钟。我正在使用 jQuery.countdown 脚本库 http://hilios.github.io/jQuery.countdown/documentation.html 进行倒计时。当我的倒计时结束或到达 00:00:00 时，我停止倒计时并显示“00:00:00”。这没有问题。但我想要的是在特定时间之后，假设如果数字时钟是 08:00:00 我想重新开始倒计时。 jQuery.Countdown 库有一个函数 pause/start 也许这是我需要的，但我不知道如何实现它。

<div id="realtime-digiclock">08:00:00</div>

<?php
$dateToday = date("Y-m-d");
?>

<span class="countdown" value="<?php echo $dateToday; ?> 00:10:00"></span>
<span class="countdown" value="<?php echo $dateToday; ?> 00:20:00"></span>
<span class="countdown" value="<?php echo $dateToday; ?> 00:30:00"></span>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hilios/jQuery.countdown@master/dist/jquery.countdown.min.js"></script>

<script>
            
$(function(){        
      $('.countdown').each(function(){
         $(this).countdown($(this).attr('value'), function(event) {
         $(this).text(event.strftime('%H:%M:%S'));
      }).on('finish.countdown', function(e) {
          $(this).text("00:00:00");
        });
    });
 });   
</script>
    <!-- Digiclock - https://jquerycards.com/forms/date-time/jclocksgmt-js/--> 
<script>
 $(function(){ 
  $('#realtime-digiclock').jClocksGMT({ title:'', offset:'-4', timeformat:'hh:mm:ss a', skin: 2, analog: false });
    });                 
</script>

【问题讨论】：

我已经更新了我的问题。数码时钟是一个实时时钟。并不总是早上 8 点。

标签： php html jquery

【解决方案1】：

我检查了jQuery.Countdown docs，但它没有提到“重置”功能。但是，如果您查看source code in countdown.js，您会发现除了文档中提到的方法之外，还有几种方法可以使用 - 您需要的是.setFinalDate(value) -> 因为您可以倒计时停止时重写。

例如，假设您有一个倒数计时器 (#countdown1)，您想在它到达终点时“重置”它。假设timeNow = 2020-09-20 17:00:00 和deadline1 = 2020-09-20 17:00:10。倒数计时器将运行10 秒，然后设置finish.countdown 事件并停止。此时，您想为下一次“重置”它：deadline2 = 2020-09-20 17:00:20，因此计时器将再运行 10 秒。这个例子你需要的代码是这样的：

这里是jsfiddle working demo：

<!-- resources -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hilios/jQuery.countdown@master/dist/jquery.countdown.min.js"></script>
<!-- demo html - one countdown -->
<span id="countdown1" value=""></span>

<script>
/* demo vars...*/
var timeNow = (new Date()).getTime();
var deadline1 = timeNow + 10 * 1000; // after 10 seconds
var deadline2 = timeNow + 20 * 1000; // after 20 seconds (10 seconds after first deadline)
/* setup the countdown */
$("#countdown1").countdown(deadline1, function (event) {
      $(this).text(event.strftime("%H:%M:%S"));
    })
.on("finish.countdown", function(e){
  var $target = $(this);
  if (e.timeStamp < deadline2) {
    alert("First deadline reached! -> continue to next one...");
    /** RESET THE COUNTDOWN -> .setFinalDate() method **/
    $target.countdown("setFinalDate", deadline2);
    /** RESTART THE COUNTDOWN **/
    $target.countdown("start")
  } else {
    alert("Second deadline reached! -> END");
  }
});
</script>

我希望这个演示对你有所帮助。

【讨论】：