JavaScript Christmas Countdown

This is a basic JavaScript countdown timer that counts the number of days, hours, minutes and seconds until Christmas day. Note that I have purposely kept this as simple as possible so that you can style and modify the timer to suit your own needs.

A few pieces of information about this timer:

  • When the countdown timer reaches Christmas day, the intervals will all stay at 0 for the day. i.e. There won’t be any ugly-looking minus characters.
  • When the 26th of December is reached, the timer will automatically begin to count down to next year’s Christmas day. i.e. On the 26th of December, 2019, it will begin to count down to the 25th of December, 2020.

The HTML.

Here is the HTML for the timer:

As you can see, I have kept the HTML above as basic as possible. Feel free to add your own CSS styling or change the div elements to span elements.

The JavaScript.

Here is the JavaScript for our Christmas countdown, which has been heavily commented:

A few notes about the JavaScript code above:

  1. We created a function called calculateChristmasCountdown. It is this function that does all of the work.
  2. When you first load the page, you need to call the calculateChristmasCountdown function once in order to start the timer.
  3. Once the function has been called, it will use the setTimeout() method to recursively call itself every second.
  4. If you want to modify the code and calculate the number of weeks or months, then you will need to do this BEFORE the days, hours, minutes and seconds are calculated.
  5. The code above uses native JavaScript. No JQuery is required.

Facebook Comments