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:

<div id="countdown">
    <h1>Countdown until Christmas Day.</h1>
    <div id="days"></div>
    <div id="hours"></div>
    <div id="minutes"></div>
    <div id="seconds"></div>
</div>

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:

/**
 * Our JavaScript function, which calculates the days, hours,
 * minutes and seconds left until Christmas day.
 */
function calculateChristmasCountdown(){
    
    //Get today's date.
    var now = new Date();

    //Get the current month. Add a +1 because
    //getMonth starts at 0 for January.
    var currentMonth = (now.getMonth() + 1);

    //Get the current day of the month.
    var currentDay = now.getDate();

    //Work out the year that the next Christmas
    //day will occur on.
    var nextChristmasYear = now.getFullYear();
    if(currentMonth == 12 && currentDay > 25){
        //This year's Christmas Day has already passed.
        nextChristmasYear = nextChristmasYear + 1;
    }

    var nextChristmasDate = nextChristmasYear + '-12-25T00:00:00.000Z';
    var christmasDay = new Date(nextChristmasDate);

    //Get the difference in seconds between the two days.
    var diffSeconds = Math.floor((christmasDay.getTime() - now.getTime()) / 1000);

    var days = 0;
    var hours = 0;
    var minutes = 0;
    var seconds = 0;

    //Don't calculate the time left if it is Christmas day.
    if(currentMonth != 12 || (currentMonth == 12 && currentDay != 25)){
        //Convert these seconds into days, hours, minutes, seconds.
        days = Math.floor(diffSeconds / (3600*24));
        diffSeconds  -= days * 3600 * 24;
        hours   = Math.floor(diffSeconds / 3600);
        diffSeconds  -= hours * 3600;
        minutes = Math.floor(diffSeconds / 60);
        diffSeconds  -= minutes * 60;
        seconds = diffSeconds;
    }

    //Add our counts to their corresponding HTML elements.
    document.getElementById('days').innerHTML = days + ' Days';
    document.getElementById('hours').innerHTML = hours + ' Hours';
    document.getElementById('minutes').innerHTML = minutes + ' Minutes';
    document.getElementById('seconds').innerHTML = seconds + ' Seconds';

    //Recursive call after 1 second using setTimeout
    setTimeout(calculateChristmasCountdown, 1000);
}

calculateChristmasCountdown();

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.