Question

I’m trying to create a timer that counts down in years, months, days, hours, minutes, seconds and milliseconds. I’ve found a few guides online, but they are sort of not easy to understand, or do not do the milliseconds. Can anyone help me do something like this, say, for this friday at 13:30.

so it could read 0y 0m 2d 2h 11m 50ms

and counts down the milliseconds. I would show code to demonstrate that I have actually tried to do this myself, but it all failed so dismally that i’d be embarrassed to.

I also read this article, which makes me mistrust javascript timers a bit. Is this true, that they become so out of sync?

Thanks for any help!

Answer 1

Depends how you implement it.

If you read the time once and depend on the setInterval or/and setTimeout for the accuracy then yes .. they can get out of sync.

If you always get the current time for using in your calculations, then it can go out of sync like the rest of your system goes out of sync… meaning that it follows the clock of the computer.

Altering my answer at JavaScript / jQuery Countdown to add milliseconds you get

var end = new Date('13 Apr 2012 13:30:00');

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24;
var timer;

function showRemaining()
{
    var now = new Date();
    var distance = end - now;
    if (distance < 0 ) {
       // handle expiry here..
       clearInterval( timer ); // stop the timer from continuing ..
       //alert('Expired'); // alert a message that the timer has expired..
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor( (distance % _day ) / _hour );
    var minutes = Math.floor( (distance % _hour) / _minute );
    var seconds = Math.floor( (distance % _minute) / _second );
    var milliseconds = distance % _second;

    var countdownElement = document.getElementById('timer');
    countdownElement.innerHTML = days  + 'd ' +
                                 hours + 'h ' +
                                 minutes + 'm ' +
                                 seconds + 's ' +
                                 milliseconds + 'ms';
}

timer = setInterval(showRemaining, 10);

But it does not handle month and year as that needs more complex calculations to factor 28-31 day months and leap years..

Demo at http://jsfiddle.net/TaHtz/2/