Блог

У меня есть несколько таймеров обратного отсчета и цифровые часы реального времени, которые работают и работают. Я использую библиотеку скриптов jQuery.countdown http://hilios.github.io/jQuery.countdown/documentation.html для моего обратного отсчета. Когда мой обратный отсчет заканчивается или достигает 00:00:00, я останавливаю обратный отсчет и показываю «00:00:00». Это работает без проблем. Но я хочу, чтобы через определенное время, скажем, если цифровой код равен 08:00:00, я хочу перезапустить обратный отсчет. jQuery.В библиотеке обратного отсчета есть функция 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>
  

Я проверил jQuery.Документы обратного отсчета, но в них не упоминается функция «сброса». Однако, если вы проверите исходный код в 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:

 <!-- 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>
  

Я надеюсь, что эта демонстрация поможет вам.