JavaScript - How To Create A Countdown Timer?

Last Updated : 26 Nov, 2024

A countdown timer is a timer that runs for a specific time limit and when that limit get crossed then it stops the timer and the message get displayed on the screen. it can be used for a website or blog to display the countdown to any special event, such as a birthday or anniversary.

The Basics of a Countdown Timer

Set a valid end date.
Calculate the time remaining.
Convert the time to a usable format.
Output the clock data as a reusable object.
Display the clock on the page, and stop the clock when it reaches zero.

We will set a valid end date, the Valid end date and time should be a string in any of the formats understood by JavaScript’s Date.parse() method. First, we calculate the time remaining by subtracting the deadline from the current date and time then we calculate the number of days, hours, minutes, and seconds. The Math.floor() function is used to return the largest integer less than or equal to a given number. Then we will show the result on the screen.

Example 1: This example shows a working countdown timer using JavaScript.

html

<p id="demo" style="font-size: 25px; text-align: center;"></p>

<!-- Adding JavaScript code -->
<script>
    // Converting string to required date format 
    let deadline = new Date("Oct 29, 2024 13:37:25")
        .getTime();

    // To call defined fuction every second
    let x = setInterval(function () {

        // Getting current time in required format
        let now = new Date().getTime();

        // Calculating the difference
        let t = deadline - now;

        // Getting value of days, hours, minutes, seconds
        let days = Math.floor(t / (1000 * 60 * 60 * 24));
        let hours = Math.floor(
            (t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let minutes = Math.floor(
            (t % (1000 * 60 * 60)) / (1000 * 60));
        let seconds = Math.floor(
            (t % (1000 * 60)) / 1000);

        // Output the remaining time
        document.getElementById("demo").innerHTML =
            days + "d " + hours + "h " +
            minutes + "m " + seconds + "s ";

        // Output for over time
        if (t < 0) {
            clearInterval(x);
            document.getElementById("demo")
                .innerHTML = "EXPIRED";
        }
    }, 1000);
</script>

Output

Example 2: This example shows a working countdown timer using JavaScript and CSS.

HTML

<!-- Title or heading -->
<h1>Countdown Clock</h1>
<div id="clockdiv">
    <div>

        <!-- Show No. of days -->
        <span class="days" id="day"></span>
        <div class="smalltext">Days</div>
    </div>
    <div>

        <!-- Show no.of hours -->
        <span class="hours" id="hour"></span>
        <div class="smalltext">Hours</div>
    </div>
    <div>

        <!-- Show no. of minutes -->
        <span class="minutes" id="minute"></span>
        <div class="smalltext">Minutes</div>
    </div>
    <div>

        <!-- Show seconds -->
        <span class="seconds" id="second"></span>
        <div class="smalltext">Seconds</div>
    </div>
</div>
<p id="demo"></p>

CSS

body {
    text-align: center;
    background: #00ecb9;
    font-family: sans-serif;
    font-weight: 100;
}

/* Styling for heading */
h1 {
    color: #396;
    font-weight: 100;
    font-size: 40px;
    margin: 40px 0px 20px;
}

#clockdiv {
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
}

#clockdiv>div {
    padding: 10px;
    border-radius: 3px;
    background: #00bf96;
    display: inline-block;
}

#clockdiv div>span {
    padding: 15px;
    border-radius: 3px;
    background: #00816a;
    display: inline-block;
}

/* Style for visible text */
.smalltext {
    padding-top: 5px;
    font-size: 16px;
}

JavaScript

// Getting formated date from date string
let deadline = new Date("dec 31, 2023 15:37:25").getTime();

// Calling defined function at certain interval
let x = setInterval(function () {
  // Getting current date and time in required format
  let now = new Date().getTime();

  // Calculating difference
  let t = deadline - now;

  // Getting values of days,hours,minutes, seconds
  let days = Math.floor(t / (1000 * 60 * 60 * 24));
  let hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((t % (1000 * 60)) / 1000);

  // Show the output time
  document.getElementById("day").innerHTML = days;
  document.getElementById("hour").innerHTML = hours;
  document.getElementById("minute").innerHTML = minutes;
  document.getElementById("second").innerHTML = seconds;

  // Show overtime output
  if (t < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "TIME UP";
    document.getElementById("day").innerHTML = "0";
    document.getElementById("hour").innerHTML = "0";
    document.getElementById("minute").innerHTML = "0";
    document.getElementById("second").innerHTML = "0";
  }
}, 1000);