Just Javascript: Creating a countdown timer

In this series I create some of the most common scripts used on websites in pure Javascript. The reason for this series is I’m tired of everybody simply ‘using jQuery’ for absolutely no reason when the code they are trying to achieve can be written in a few lines of pure Javascript code.

This time we create a countdown timer.

A common item seen on a lot of websites for a coming soon feature or a countdown to a sale ending, its pretty easy to achieve in Javascript here is how.

This is the actual timer we will be creating, I used it on the next website for a countdown to a new product launch (with some added styling of course).

countdown timer

We firstly want to create a variable to hold our target date/time for the count down:

var target = new Date('07/19/2016 10:00 AM');

This code is self explanatory, we simply create a new Date object and pass it our target date and time. Next we need to create our time variables for seconds, minutes, hours and days:

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;

Again nothing complicated here, we initialise each one of our variables and then set an integer for each one in milliseconds. Next we need to create a function that will show the time in our document, I will break it down step by step below.

function showTime() {
    var now = new Date();
    var timeToGo = target - now;
    if (timeToGo < 0) {

        clearInterval(timer);
        document.getElementById('countdown').innerHTML = 'Countdown Completed!';

        return;
    }
    var days = Math.floor(timeToGo / _day);
    var hours = Math.floor((timeToGo % _day) / _hour);
    var minutes = Math.floor((timeToGo % _hour) / _minute);
    var seconds = Math.floor((timeToGo % _minute) / _second);

    document.getElementById('countdown').innerHTML = 'Days: ' + days;
    document.getElementById('countdown').innerHTML += 'Hours: ' + hours;
    document.getElementById('countdown').innerHTML += 'Minutes: ' + minutes;
    document.getElementById('countdown').innerHTML += 'Seconds: ' + seconds;
}

Firstly we create a new Date object because we’ve not passed it anything it will create a Date object for the current time and date. We now need to find the difference between the current time and the target time.

var timeToGo = target - now;

If the time to go is less than 0 then we write out to the document that the countdown is complete.

document.getElementById('countdown').innerHTML = 'Countdown Completed!';

If the timer hasn’t reached 0 yet we update the days, hours, minutes and seconds vars and then we output the remaining times to the screen.

    var days = Math.floor(timeToGo / _day);
    var hours = Math.floor((timeToGo % _day) / _hour);
    var minutes = Math.floor((timeToGo % _hour) / _minute);
    var seconds = Math.floor((timeToGo % _minute) / _second);

    document.getElementById('countdown').innerHTML = 'Days: ' + days;
    document.getElementById('countdown').innerHTML += 'Hours: ' + hours;
    document.getElementById('countdown').innerHTML += 'Minutes: ' + minutes;
    document.getElementById('countdown').innerHTML += 'Seconds: ' + seconds;

The final part to the puzzle is to trigger the above function every second we achieve this using the setInterval method and passing it our function and 1000ms.

timer = setInterval(showTime, 1000);

That’s it, all you need to do is create a div with a id of countdown and the javascript will update this div every second until the countdown has been reached.

The final code completed:

var target = new Date('07/19/2016 10:00 AM');

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;

function showTime() {
    var now = new Date();
    var timeToGo = target - now;
    if (timeToGo < 0) {

        clearInterval(timer);
        document.getElementById('countdown').innerHTML = 'Countdown Completed!';

        return;
    }
    var days = Math.floor(timeToGo / _day);
    var hours = Math.floor((timeToGo % _day) / _hour);
    var minutes = Math.floor((timeToGo % _hour) / _minute);
    var seconds = Math.floor((timeToGo % _minute) / _second);

    document.getElementById('countdown').innerHTML = 'Days: ' + days;
    document.getElementById('countdown').innerHTML += 'Hours: ' + hours;
    document.getElementById('countdown').innerHTML += 'Minutes: ' + minutes;
    document.getElementById('countdown').innerHTML += 'Seconds: ' + seconds;
}

timer = setInterval(showTime, 1000);

One thought on “Just Javascript: Creating a countdown timer”

Leave a Reply

Your email address will not be published. Required fields are marked *