create countdown timer in milliseconds

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!

http://stackoverflow.com/questions/8067488/how-to-show-milliseconds-in-count-down-timer-javascript — Ghokun, Apr 11 '12 at 19:29
Yes it is true that they become out of sync. As a system administrator, I know that computer clocks can get way off (10 or 20 seconds) over the course just just weeks. After months they get get off by minutes. It is important to periodically sync to a standard time server. So making a javascript based count down would depend on the accuracy of your computer clock. — jeffery_the_wind, Apr 11 '12 at 19:45
Since you want to count down over many days, perhaps even weeks years or months, where do you want this program to run? On a web server? On your desktop computer? On a cell phone? — jeffery_the_wind, Apr 11 '12 at 19:48
i'd like it to run on a desktop computer. of course the out of sync issue isn't very critical; i'll just be looking at it for 1 second, and then have the info i want. But I thought it was an interesting concept and thought i may as well learn to implement it. — 1252748, Apr 11 '12 at 22:32

score 8 · Accepted Answer · edited May 23 '17 at 11:53

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/

@Straseus, it isn't very .. but i answered before him and i wrote the code ;) — Gabriele Petrioli, Apr 11 '12 at 21:42
yeah i just used the jsfiddle code from another post that I found googling. Open source rocks! — jeffery_the_wind, Apr 12 '12 at 11:56

jeffery_the_wind · Answer 2 · 2012-04-11T20:08:09.893

1

Try this js fiddle: http://jsfiddle.net/QH6X8/185/

Set the end date with the end variable defined on the first line of the JavaScript.

If you don't want to update every 1 millisecond, then here is a jsfiddle updating every 60: http://jsfiddle.net/QH6X8/187/

edited Apr 11 '12 at 20:08

answered Apr 11 '12 at 19:56

jeffery_the_wind

17,048
34
98
160

While it looks sweet, I wouldn't recommend using it. It shoots my CPU usage to 100%. – Straseus Apr 11 '12 at 19:58
wow cool, let me check mine ... My CPU is still low ... 10% or less – jeffery_the_wind Apr 11 '12 at 19:58
i mean a timer like this is still a super lightweight app. – jeffery_the_wind Apr 11 '12 at 19:59
@jeffery_the_wind. I can confirm that. – gdoron Apr 11 '12 at 20:00
@gdoron - thanks, you can confirm your CPU is 100% or low < 10%? – jeffery_the_wind Apr 11 '12 at 20:01
3

You're updating the DOM every millisecond, how does that fit into the definition of a lightweight app. – Straseus Apr 11 '12 at 20:02
@jeffery_the_wind. I replied to your comment so, I confirmed CPU low... anyway you can change the interval from 1ms to 100, no will notice expect the CPU... – gdoron Apr 11 '12 at 20:02
@Straseus, this one updates every 10 microseconds, still no noticable change in my CPU speed -> http://jsfiddle.net/QH6X8/186/ – jeffery_the_wind Apr 11 '12 at 20:06
@gdoron: Good point, the human eye's fps is around 60. Our brain's update rate is even slower than that. About 50ms seems low enough to me, you'll be cutting down 980 cycles every second. – Straseus Apr 11 '12 at 20:06
@jeffery_the_wind Me neither, because it's still stuck at 100%. My laptop is 2 years old, so yours is probably faster. Imagine what your script would do to a mobile phone. – Straseus Apr 11 '12 at 20:09
@Straseus. I rechecked it and my CPU is 70%. don't know how it was low in the first try. If I change the interval to 100ms, CPU 10%! – gdoron Apr 11 '12 at 20:11
@Straseus - haha, good point, I will try on my 6 year old laptop (centrino) later tonight and update here the results. – jeffery_the_wind Apr 11 '12 at 20:11
1

Every time your timer fires it's causing 10 parse events, a layout and 2 paints :S – david Apr 11 '12 at 20:27
1

My cpu stays at, like, 2%. And it works totally okay on my phone. I think it's really neat. Thanks! – 1252748 Apr 11 '12 at 23:02
any idea on how to add leading zeros? – 1252748 Apr 11 '12 at 23:03
Yeah this is a ThinkPad X61S w/ Intel Centrino Duo the 1 millisecond update puts both CPUs from about 20% to about 50%, so it does dramatically affect the CPU speed. Maybe we can optimize it a little, – jeffery_the_wind Apr 12 '12 at 00:48
with all the other operations being the same and commenting out the lines that update the graphics (all the `innerHTML` lines) My Laptop CPU goes back down to idle speed while running... @user1252748 - how many zeros you want to add? – jeffery_the_wind Apr 12 '12 at 01:01
@jeffery_the_wind Nice of you to take the time to test it out. Good work bro! – Straseus Apr 12 '12 at 05:06
yeah, thanks for taking a look at the speed issues. I'd just like to add 1 zero to the day if it's 1-9, or 2 zeros if it's 0. Same for hours, minutes, seconds. And then two two possible leading zeros for milliseconds. That way everything stays the same width. So the time could be like: 00d 15h 09m 004ms. Thanks! – 1252748 Apr 12 '12 at 13:23
Also, is there a lighterweight way to update the page, if that is really resource heavy. I'm trying to think of another way to make a counter. Is it a lighter computation to, say, move an image than update the html of dom nodes from scratch every 30ms..? Probably not. – 1252748 Apr 12 '12 at 13:25

create countdown timer in milliseconds

2 Answers2