How to Create a Countdown Timer in JavaScript

This tutorial will demonstrate how to create a countdown timer in JavaScript, including a function you can copy and paste into your own code.

The below code will break down creating a function which calculates the time until a certain future time, and how to run it repeatedly to affect a count down timer.

Getting the time remaining until a certain date/time

The below function will calculate the days, hours, minutes, and seconds to a target date:

function timeToTarget(countdownString){

    // Convert the string which specifies the target to count down to to a Date object
    let targetDate = new Date(countdownString).getTime();

    // Get the current time
    let now = new Date().getTime();

    //The getTime() method gets a millisecond representation of the time since January 1st, 1970

    //Get the difference between the two
    let difference = targetDate - now;

    // Calculate the days, hours, minutes, seconds difference between the times
    days = Math.floor(difference / (1000 * 60 * 60 * 24));
    hours = Math.floor(difference / (1000 * 60 * 60));
    minutes = Math.floor(difference / (1000 * 60));
    seconds = Math.floor(difference / 1000);

    // Calculate the result
    // As each of the above is the total days, hours, minutes, seconds difference, they need to be subtracted so that they add up to the correct total
    let result =  {
        days: days,
        hours: hours - days * 24,
        minutes: minutes - hours * 60,
        seconds: seconds - minutes * 60,
    };

    // Log the result so we can check that the function is working
    console.log(result);

    // Return the result so that it can be used outside of the function
    return result;
}

Counting Down with setInterval()

The JavaScript setInterval() method calls a given function repeatedly, with a fixed time delay between runs:

setInterval(function(){
    // Code to execute repeatedly here
}, 1000);

Above, the function timeToTarget() is called every second (1000 milliseconds).

Displaying the Countdown

To display the results of the countdown on a web page, a HTML element is required:

<div id="countdown-display"></div>

The following JavaScript can then be used to write the countdown information to the HTML element:

document.getElementById("countdown-display").innerHTML =
    '<div>' + result.days + '<span>Days</span></div>' +
    '<div>' + result.hours + '<span>Hours</span></div>' +
    '<div>' + result.result + '<span>Minutes</span></div>' +
    '<div>' + result.seconds + '<span>Seconds</span></div>';

Putting It All Together

Finally, the date/time to countdown to needs to be specified as a string – this data could come from a date picker or other user input, or from a database:

var countdownString = "Feb 7, 2023 19:30:00";

Putting it all together, a working countdown timer!

var countdownString = "Feb 7, 2023 19:30:00";

function timeToTarget(countdownString){

    let targetDate = new Date(countdownString).getTime();
    let now = new Date().getTime();
    let difference = targetDate - now;

    days = Math.floor(difference / (1000 * 60 * 60 * 24));
    hours = Math.floor(difference / (1000 * 60 * 60));
    minutes = Math.floor(difference / (1000 * 60));
    seconds = Math.floor(difference / 1000);

    let result =  {
        days: days,
        hours: hours - days * 24,
        minutes: minutes - hours * 60,
        seconds: seconds - minutes * 60,
    };

    console.log(result);

    return result;

}

setInterval(function(){
    let result = timeToTarget(countdownString);
    document.getElementById("countdown-display").innerHTML =
        '<div>' + result.days + '<span> Days</span></div>' +
        '<div>' + result.hours + '<span> Hours</span></div>' +
        '<div>' + result.minutes + '<span> Minutes</span></div>' +
        '<div>' + result.seconds + '<span> Seconds</span></div>' +
        '<div><span>Until </span>' + countdownString + '</div>';

}, 1000);