如何使这个倒计时计时器倒计时到特定日期，而不仅仅是从某个时间开始？答案

【问题标题】：How to make this countdown timer countdown to a specific date, not just from a time?如何使这个倒计时计时器倒计时到特定日期，而不仅仅是从某个时间开始？
【发布时间】：2019-10-15 18:48:14
【问题描述】：

我正在尝试更改此 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);

【问题讨论】：

在“initializeClock('clockdiv',deadline);”我认为clockdiv指的是一个ID。所以你应该在前面加上#.
@SkyeMacMaster 不需要“#”前缀，因为在 initializeClock() OP 使用 document.getElementById() 选择元素，不需要哈希字符。
你试过了吗：“var deadline = new Date('December 16, 2019');” jsfiddle.net/morgandev/nk307yf9/3

标签： javascript countdowntimer

【解决方案1】：

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

我的代码没有考虑闰日或夏令时。因此，由于几周后的时间变化，现在休息一个小时。但是，我的算法会自我纠正。所以时间改变后就正确了。

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);

【讨论】：