How to Count down to Christmas on a Web Site

Adding a Javascript Christmas Countdown for the Internet

Nov 17, 2008
Mark Alexander Bain

A Javascript Christmas Count Down - Mark Alexander Bain

A Christmas countdown is a useful display for any web site and can be implemented easily - as this short and simple tutorial show.

Every year Christmas seems to come around more and more quickly - even before the Halloween pumpkins have been taken down everyone starts counting the number of days left until Christmas Day - whether it's children looking forward to Santa Claus coming, or their mother wondering if she's got enough time to buy their presents. Fortunately every web site designer can help with that process by adding a Javascript Christmas countdown to one of their web pages; and so the code for this Christmas countdown will need to:

calculate the amount of time between the current time and Christmas day
format the time and display it on the web page
create a timer that will refresh the display

Working with Javascript Dates

The code for the Christmas countdown should (as always) be incorporated into a function:

function count_down () {

The function uses two instances of the Javascript date object: one instance is used for the date of Christmas day; the other is used for the current date and time:

var christmas = new Date;

var today = new Date;

By default the date object is set to the current date and time, therefore the details for the Christmas date object needs to be modified with the correct details:

christmas.setDate(25);

christmas.setMonth(11);

christmas.setHours(0);

christmas.setMinutes(0);

christmas.setSeconds(0);

It's worth noting that the Javascript date object's month property starts with a value of 0 for January through to 11 for December.

Calculating the Time between Now and Christmas Day

The first step of the time calculation is to subtract the value of one date from the other; the result is actually in milliseconds (one thousandths of a second) and so the time difference in seconds can be found from:

var seconds = (christmas - today) / 1000;

From that the number of days can be calculated:

var days_unformatted = seconds / (60 * 60 * 24);

var days = parseInt (days_unformatted);

and then the number of hours:

var hours_unformatted = 24 * (days_unformatted - days);

var hours = parseInt (hours_unformatted);

the number of minutes:

var minutes_unformatted = 60 * (hours_unformatted - hours);

var minutes = parseInt (minutes_unformatted);

and the number of seconds:

var seconds = parseInt (60 * (minutes_unformatted - minutes));

Displaying the Christmas Count Down

The result of the calculation now needs to be displayed - that's done by selecting an object (such as a div area) and then writing a formatted output to it:

var text_time_left = document.getElementById("text_time_left");

text_time_left.innerHTML = "Time until Christmas: " +

days + " days " +

hours + " hours " +

minutes + " minutes " +

seconds + " seconds";

Adding a Timer

Finally a timer can be added - this will recalculate the time difference and update the display once every second using the Javascript setTimeout function:

setTimeout ('count_down()', 1000 );

}

Now the count_down function just needs to be called:

count_down();

The display will look something like:

Time until Christmas: 37 days 7 hours 34 minutes 35 seconds

Conclusion

The web page will, of course, need a div area for the output:

However, once that's done then the web page will happily count down until Christmas day; and the beauty of this code is that with just a minor change it will work for: New Year's Day; a birthday; a software launch date; or any other date that the web page user might find useful.