javascript - 如何让这个倒数计时器倒计时到特定日期，而不仅仅是从一个时间开始？

Question

我正在尝试更改此 JavaScript，使其倒计时到特定日期 - 2019 年 12 月 16 日，而不是仅仅说 15 天，我尝试了一些方法但被卡住了。

        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 clock = document.getElementById(id);
        var daysSpan = clock.querySelector('.days');
        var hoursSpan = clock.querySelector('.hours');
        var minutesSpan = clock.querySelector('.minutes');
        var secondsSpan = clock.querySelector('.seconds');

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

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

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

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

      var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
      initializeClock('clockdiv', deadline);

Answer 1

稍微修改了您的代码以获得有效的倒计时。虽然，我在修改代码之前并没有实际测试它。

我的代码不考虑闰日或夏令时。所以现在是一个小时的休息时间，因为几周后时间会发生变化。但是，我的算法会 self 纠正。所以时间改变后它会是正确的。

function getTimeRemaining(endDate) {
    var now = new Date();
    var timeSpanInMilliseconds = Date.parse(endDate) - now;
    var millisecondsInSecond = 1000;
    var millisecondsInMinutes = millisecondsInSecond * 60;
    var millisecondsInHours = millisecondsInMinutes * 60;
    var millisecondsInDays = millisecondsInHours * 24;

    var days = Math.floor(timeSpanInMilliseconds / millisecondsInDays);
    var remainingMilliseconds = timeSpanInMilliseconds - days * millisecondsInDays;
    var hours = Math.floor(remainingMilliseconds / millisecondsInHours);
    remainingMilliseconds = remainingMilliseconds - hours * millisecondsInHours;
    var minutes = Math.floor(remainingMilliseconds / millisecondsInMinutes);
    remainingMilliseconds = remainingMilliseconds - minutes * millisecondsInMinutes;
    var seconds = Math.floor(remainingMilliseconds / millisecondsInSecond);

    return {
        'total': millisecondsInSecond,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
    };
}

function initializeClock(id, endDate) {
    var clock = document.getElementById(id);

    var daysSpan = clock.querySelector('.days');
    var hoursSpan = clock.querySelector('.hours');
    var minutesSpan = clock.querySelector('.minutes');
    var secondsSpan = clock.querySelector('.seconds');

    var timeInterval = setInterval(updateClock, 1000);

    updateClock();

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

        daysSpan.innerHTML = t.days;
        hoursSpan.innerHTML = t.hours < 10 ? '0' + t.hours : t.hours;
        minutesSpan.innerHTML = t.minutes < 10 ? '0' + t.minutes : t.minutes;
        secondsSpan.innerHTML = t.seconds < 10 ? '0' + t.seconds : t.seconds;

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

var endDate = new Date(2019, 11, 16);
initializeClock('clockdiv', endDate);