How to make this countdown timer countdown to a specific date, not just from a time?

user_12222353 0
Viewed 100

I am trying to change this JavaScript so that it countdowns to a specific date- December 16, 2019 instead of just saying 15 days, I have tried a few things but am stuck. 

        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);
countdowntimer javascript
1 Answers

Modified your code a little to get a working countdown. Although, I didn't actually test the code before modifying it.

My code doesn't account for leap days or daylight savings time. So right now it's an hour off because of the time change in a couple weeks. However, my algorithm self-corrects. So it'll be correct after the time change.

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