如何使此倒数计时器倒数到特定日期,而不仅仅是从一个时间开始?

问题描述 投票:1回答:1

我正在尝试更改此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);
javascript countdowntimer
1个回答
0
投票

稍微修改了您的代码以使工作倒计时。虽然,我在修改代码之前并没有真正测试过代码。

我的代码未考虑leap日或夏令时。因此,由于两周后的时间变化,现在需要一个小时的时间。但是,我的算法可以自我纠正。因此,时间更改后它将是正确的。

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);
© www.soinside.com 2019 - 2024. All rights reserved.