So, I have the below (seconds countdown) in good order. But! I am trying to add hours & minutes as apart of the count down as well. Ideally keeping the same structure, and just using pure JS. I would like the output to be:

There is X hours, X minutes, and X seconds remaining on this Sale!

var count=30;

    var counter=setInterval(timer, 1000); //1000 will  run it every 1 second

    function timer()
    {
      count=count-1;
      if (count <= 0)
      {
         clearInterval(counter);
         return;
      }

     document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling
    }

If the solution has to be a rewrite with jQuery or another library; that's fine. Just not preferable. Cheers and Salutations for any help.

So, I have the below (seconds countdown) in good order. But! I am trying to add hours & minutes as apart of the count down as well. Ideally keeping the same structure, and just using pure JS. I would like the output to be:

There is X hours, X minutes, and X seconds remaining on this Sale!

var count=30;

    var counter=setInterval(timer, 1000); //1000 will  run it every 1 second

    function timer()
    {
      count=count-1;
      if (count <= 0)
      {
         clearInterval(counter);
         return;
      }

     document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling
    }

If the solution has to be a rewrite with jQuery or another library; that's fine. Just not preferable. Cheers and Salutations for any help.

• javascript
• jquery

• maybe this jQuery plugin (if you use jQuery) will be useful keith-wood.name/countdown.html – Alexander Kobelev Commented Aug 15, 2013 at 22:09
• Moment.js could also help, but I don't know for sure – Michiel Dral Commented Aug 15, 2013 at 22:18
• You should calculate the actual time using the current time vs end time, rather than incrementing a counter. That is because setTimeout is not guaranteed to run at exactly 1000ms, it could be running every 1050 ms and then your count would be incorrect after a while. Using setTimeout up trigger the update is correct rhough. – loganfsmyth Commented Aug 15, 2013 at 22:54

3 Answers 3

Something like this:

var count = 30;
var counter = setInterval(timer, 1000); //1000 will  run it every 1 second

function timer() {
    count = count - 1;
    if (count == -1) {
        clearInterval(counter);
        return;
    }

    var seconds = count % 60;
    var minutes = Math.floor(count / 60);
    var hours = Math.floor(minutes / 60);
    minutes %= 60;
    hours %= 60;

    document.getElementById("timer").innerHTML = hours + "hours " + minutes + "minutes and" + seconds + " seconds left on this Sale!"; // watch for spelling
}

var totalSeconds = 3723; // lets say we have 3723 seconds on the countdown
                         // that's 1 hour, 2 minutes and 3 seconds.

var hours   = Math.floor(totalSeconds / 3600 );
var minutes = Math.floor(totalSeconds % 3600 / 60);
var seconds = totalSeconds % 60;

var result = [hours, minutes, seconds].join(':');
console.log(result);
// 1:2:3

• hours is seconds divided by the number of seconds in hour (3600) rounded down
• minutes is the remainder of the above division, divided by the number of seconds in a minute (60), rounded down.
• seconds is the remainder of total seconds divided by seconds in a minute.

Each calculation after hour has to use a modulus calculation to get the remainder, because you don't care about total time at that step, just progress to the next tick.

I would use a similar method to the others, but I wouldn't rely on setInterval / setTimeout as a timer, especially if users might be looking at the page for some time, as it tends to be inaccurate.

var endTime = new Date(2013, 10, 31).getTime() / 1000;
function setClock() {
    var elapsed = new Date().getTime() / 1000;
    var totalSec =  endTime - elapsed;
    var d = parseInt( totalSec / 86400 );
    var h = parseInt( totalSec / 3600 ) % 24;
    var m = parseInt( totalSec / 60 ) % 60;
    var s = parseInt(totalSec % 60, 10);
    var result = d+ " days, " + h + " hours, " + m + " minutes and " + s + " seconds to go!";
    document.getElementById('timeRemaining').innerHTML = result;
    setTimeout(setClock, 1000);
}
setClock();

This method calculates the difference between now and the date in the future each time it is run, thus removing any inaccuracies.

Here is an example: http://jsfiddle.net/t6wUN/1/