Nithin Bekal

After yet another disappointing performance yesterday by the football (soccer, if you’re American) club I support, Liverpool, this was my tweet:

I’ve already started counting days until FIFA world cup. Football season seem practically over for Liverpool. :(

I actually did count the days, but being a web developer, I ended up writing javascript code to do the dirty work for me. ;-) I’ve never really done much with javascript date and time, so I’m not sure if there’s a better way to do this, but this works. Follow these steps to create a countdown timer for FIFA World Cup 2010. It’s easy to customize it for anything else.

First, we have to create a div with id as “worldcup_countdown_time” where you want to display the countdown timer. This div will be modified by our script to display the time remaining for the World Cup kick off.

<div id="worldcup_countdown_time"> </div>

Now let’s write the script that will calculate the number of days, hours, seconds and minutes left for kick off. We’ll write each of the steps first and then put it all in a function called updateWCTime().

First we have to calculate the time difference between the current time and the time of kickoff. Here, now is the current time, and kickoff is the kickoff time. We store the difference (which we get in milliseconds) in a variable called diff.

    now = new Date();
    kickoff = Date.parse("June 11, 2010 11:30:00");
    diff = kickoff - now;

We find the time left till kickoff in terms of days, minutes, hours and seconds as shown below. We use the Math.floor function to get the absolute values in the variables. It returns the highest integer that’s less then the floating point value.

    days  = Math.floor( diff / (1000*60*60*24) );
    hours = Math.floor( diff / (1000*60*60) );
    mins  = Math.floor( diff / (1000*60) );
    secs  = Math.floor( diff / 1000 );

Now these variables will give us the exact number of hours, minutes and seconds left, but that’s not exactly what we want. If the remaining time were a day and 7 hours, we would have the value 31 (24+7) in the minutes variable. But what we want is the value 1 in the day variable, and the value 7 in the hours. Let’s create another set of variables to do that.

    dd = days;
    hh = hours - days  * 24;
    mm = mins  - hours * 60;
    ss = secs  - mins  * 60;

Now that the time has been calculated, you have to update the div you created at the beginning.

    document.getElementById("worldcup_countdown_time")
        .innerHTML =
            dd + ' days ' +
            hh + ' hours ' +
            mm + ' minutes ' +
            ss + ' seconds';

Putting it all together

Now, to make the countdown timer work, let’s put it all together.

function updateWCTime() {
	now      = new Date();
	kickoff  = Date.parse("June 11, 2010 11:30:00");
	diff = kickoff - now;

	days  = Math.floor( diff / (1000*60*60*24) );
	hours = Math.floor( diff / (1000*60*60) );
	mins  = Math.floor( diff / (1000*60) );
	secs  = Math.floor( diff / 1000 );

	dd = days;
	hh = hours - days  * 24;
	mm = mins  - hours * 60;
	ss = secs  - mins  * 60;

        document.getElementById("worldcup_countdown_time")
            .innerHTML =
                dd + ' days ' +
                hh + ' hours ' +
                mm + ' minutes ' +
                ss + ' seconds';
}
setInterval('updateWCTime()', 1000 );

The last line in the above code creates a timer that calls the updateWCTime() every 1000ms to refresh the timer every second.

Put this script in a .js file and include it in your HTML page to turn the dv with id “worldcup_countdown_time” into a countdown timer that counts down to the world cup kickoff time. There you go, you have a working countdown timer ready now with something like the following diplayed in the div:

186 days 17 hours 12 minutes 14 seconds

To count down to some other event, you can easily change the value in the kickoff variable to the date that you want to use.

Update. I’ve put up the code on gihub where you can also download it as tar.gz.