Javascript JQuery倒数计时器循环

时间:2018-08-20 07:27:46

标签: javascript jquery countdowntimer

使用以下JavaScript,如何在达到期限后的7天之内自动重启倒计时?

(function($) {
  "use strict";

  function getTimeRemaining(endtime) {
    var t = Date.parse(endtime) - Date.parse(new Date());
    var seconds = Math.floor((t / 1000) % 60);
    var minutes = Math.floor((t / 1000 / 60) % 60);
    var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
    var days = Math.floor(t / (1000 * 60 * 60 * 24));
    return {
      'total': t,
      'days': days,
      'hours': hours,
      'minutes': minutes,
      'seconds': seconds,
    };
  }

  function initializeClock(id, endtime) {
    var daysSpan = $('.days');
    var hoursSpan = $('.hours');
    var minutesSpan = $('.minutes');
    var secondsSpan = $('.seconds');

    function updateClock() {
      var t = getTimeRemaining(endtime);

      daysSpan.html(t.days);
      hoursSpan.html(('0' + t.hours).slice(-2));
      minutesSpan.html(('0' + t.minutes).slice(-2));
      secondsSpan.html(('0' + t.seconds).slice(-2));

      if (t.total <= 0) {
        clearInterval(timeinterval);
      }
    }

    updateClock();
    var timeinterval = setInterval(updateClock, 1000);
  }

  var deadline = new Date("Aug 24, 2018");
  initializeClock('clockdiv', deadline);

})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countdown">
  <span class="days"></span> Days
  <span class="hours"></span> Hours
  <span class="minutes"></span> Minutes
  <span class="seconds"></span> Seconds
</div>

1 个答案:

答案 0 :(得分:2)

您为什么不使用新的截止日期重新初始化脚本?

if (t.total <= 0) {
  clearInterval(timeinterval);
  var newDeadline = deadline.setDate(deadline.getDate() + 7);
  initializeClock('clockdiv', newDeadline);
}