Open In App

How To Create A Countdown Timer Using JavaScript

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

A countdown timer is an accurate timer that 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 are :

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

Step 1: 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.

let deadline = new Date("dec 31, 2017 15:37:25").getTime();

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.

let now  = new Date().getTime();
let t = deadline - now;
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);

Step 3: Output the result

In the code below the result is given as output by id=”demo”

document.getElementById('demo').innerHTML = days + "d "
        + hours+ "h "+minutes+"m "+ seconds + "s ";

Step 4: Write some text if the countdown is over

If the countdown timer is over then “expired” will be displayed on the screen.

if(t<0){
      clearIntervl(x);
      document.getElementById("demo").innerHTML = "EXPIRED";
}

Example :

html




<!DOCTYPE html>
<html>
    <head>
        <!-- Adding CSS/Stylesheet -->
        <style>
            p {
                text-align: center;
                font-size: 60px;
            }
        </style>
    </head>
    <body>
        <p id="demo"></p>
 
        <!-- Adding JavaScript code -->
        <script>
            // Converting string to required date format
            let deadline = new Date("Jan 5, 2024 15: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>
    </body>
</html>


Output:

When the countdown is over

Countdown Timer with CSS using JavaScript

Example:

html




<!DOCTYPE html>
<html>
    <head>
       
        <!-- Add style/CSS -->
        <style>
            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;
            }
        </style>
    </head>
    <body>
       
        <!-- 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>
       
        <!-- Adding JavaScript code -->
        <script>
           
            // 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);
        </script>
    </body>
</html>


OUTPUT:

When the Countdown Timer session is exceeded, the following output would be displayed:

Applications of Countdown Timer

  • Used during Events to display the time left for its commencement.
  • Used by online commerce websites to display time left for an ongoing sale.
  • Used by websites during promotions
  • Used in Car racing games, football games, etc
  • Used in Auction Websites to display the left for placing bids.

Benefits of making a countdown timer in JavaScript than using plugins

  • The code will be lightweight because it will have zero dependencies.
  • The website will perform better because there won’t be any need of loading external scripts and style sheets.
  • The user gets more control because he has built the clock to behave exactly the way he wants it to rather than trying to bend a plugin according to his will.


Last Updated : 07 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads