JavaScript Countdown Timer

I was in search of a JavaScript countdown timer (mainly because I’m too lazy to build it out myself — and because I’m sure millions before me have done the same), but Google wasn’t doing me much good. Most scripts would modify the DOM, directly but not make it easy to programmatically intercept the remaining time.

So, I picked one of the cleanest scripts and cleaned it up a bit.

 * A sweet js countdown timer with a custom callback that gives you a JSON object!
 * Heavily modified code originally found on
 * @param string|Date String representation of when to countdown to. Date objects probably work too
 * @param callback Function triggered when the interval has passed
 * @param int Number of milliseconds for the timeout. Defaults to 1000 (1 second)
 * @return object Returns a JSON object with properties: days, hours, minutes, seconds
timer = function(endDate, callback, interval) {
    endDate = new Date(endDate);
    interval = interval || 1000;

    var currentDate = new Date()
        , millisecondDiff = endDate.getTime() - currentDate.getTime() // get difference in milliseconds
        , timeRemaining = {
            days: 0
            , hours: 0
            , minutes: 0
            , seconds: 0

    if(millisecondDiff > 0) {
        millisecondDiff = Math.floor( millisecondDiff/1000 ); // kill the "milliseconds" so just secs

		timeRemaining.days = Math.floor( millisecondDiff/86400 ); // days
		millisecondDiff = millisecondDiff % 86400;

		timeRemaining.hours = Math.floor( millisecondDiff/3600 ); // hours
		millisecondDiff = millisecondDiff % 3600;

		timeRemaining.minutes = Math.floor( millisecondDiff/60 ); // minutes
		millisecondDiff = millisecondDiff % 60;

		timeRemaining.seconds = Math.floor(millisecondDiff); // seconds

        setTimeout(function() {
            timer(endDate, callback);
        }, interval);

It’s easy to use! You specify an end date (as a string, though Date object’s should work as well) and pass in a callback that gets triggered at a set interval. The callback receives a JSON object with properties for days, hours, minutes and seconds. You can pass in a custom interval if you want the callback triggered at a different period. Examples below.

timer('2011-12-31', function(timeRemaining) {
	console.log('Timer 1:', timeRemaining);

// This will run every minute, instead of every second
timer('2012-12-31', function(timeRemaining) {
	console.log('Timer 2:', timeRemaining);
}, 60000);

Interested? See it in action:

PHP Magic: Building a static countdown clock using PHP and GD

Update (2010-04-20): These Gleeks are crazy. Since being released, the clock has been viewed over 200,000 times. Insane.

If you like Glee, you’ll like this. If you like image processing using PHP, you’ll like this even more.

Using PHP and the GD image library*, it’s pretty easy to create a static, image-based countdown clock, which is useful for situations where javascript cannot be used (think A new image is automatically generated server-side for every minute (assuming a request is made for the clock for that minute), and all images are cached to avoid killing the server processor. Check it out in action on Gleeks United or after the jump.

Don’t have code yet, but I’ll post it when I get a chance.

Continue reading