How To Create A Countdown Timer Using JavaScript

Creating a countdown timer using JavaScript is not a big work and we can easily create a countdown timer using JavaScript without using any library file.

Here are the simple steps to create a countdown timer using JavaScript,

  • Set a valid end date.
  • Calculate the remaining time.
  • Display the clock on the web page.
  • Stop the clock when it reaches end date.

Set a Valid End Date:

First, we need to set a valid end date by using JavaScript Date() function as follows,

var deadline = new Date("dec 31, 2018 23:59:59").getTime();

Calculate the Remaining Time:

Then, calculate the remaining time by subtracting the deadline by current time as follows,

var now = new Date().getTime();
var t = deadline - now;

Then, calculate the number of days, hours, minutes and seconds from the remaining time as follows,

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

Display the Clock:

Then, display the clock on the web page by using Javascript setInterval() function as follows,

var x = setInterval(function() {
    var now = new Date().getTime();
    var t = deadline - now;
    var days = Math.floor(t / (1000 * 60 * 60 * 24));
    var hours = Math.floor((t%(1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((t % (1000 * 60)) / 1000);

    document.getElementById("day").innerHTML = days ;
    document.getElementById("hour").innerHTML = hours;
    document.getElementById("minute").innerHTML = minutes; 
    document.getElementById("second").innerHTML = seconds; 
}, 1000);

Stop the Clock When It Reaches End Date:

Finally, when the clock reaches the end date, we need to stop the clock and display the “Time Up” text.

if (t < 0) {
    clearInterval(x);
    document.getElementById("clock").innerHTML = "Time Up";
    document.getElementById("day").innerHTML ='0';
    document.getElementById("hour").innerHTML ='0';
    document.getElementById("minute").innerHTML ='0' ; 
    document.getElementById("second").innerHTML = '0';
}

Complete Code:

Here is the complete code to display the countdown on the web page using Javascript,

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">
            body { text-align: center; }
            h1 { color: #396; font-size: 40px; margin: 40px 0px 20px; }
            #clockdiv{ color: #FFF; display: inline-block; 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; }
            smalltext{ padding-top: 5px; font-size: 16px; }
        </style>
    </head>

    <body>
        <h1>Countdown Clock</h1>
        <div id="clockdiv">
        	<div>
        		<span class="days" id="day"></span>
        		<div class="smalltext">Days</div>
        	</div>
        	<div>
        		<span class="hours" id="hour"></span>
        		<div class="smalltext">Hours</div>
        	</div>
        	<div>
        		<span class="minutes" id="minute"></span>
        		<div class="smalltext">Minutes</div>
        	</div>
        	<div>
        		<span class="seconds" id="second"></span>
        		<div class="smalltext">Seconds</div>
        	</div>
        </div>
        <p id="clock"></p>

        <script type="text/javascript">
        	var deadline = new Date("dec 31, 2018 23:59:59").getTime();

        	var x = setInterval(function() {
        		var now = new Date().getTime();
        		var t = deadline - now;
        		var days = Math.floor(t / (1000 * 60 * 60 * 24));
        		var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
        		var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
        		var seconds = Math.floor((t % (1000 * 60)) / 1000);

        		document.getElementById("day").innerHTML =days ;
        		document.getElementById("hour").innerHTML =hours;
        		document.getElementById("minute").innerHTML = minutes;
        		document.getElementById("second").innerHTML =seconds;

        		if (t < 0) {
        			clearInterval(x);
        			document.getElementById("clock").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>

Reference Image:

How To Create A Countdown Timer Using JavaScript

Hope this helps you.

One Comment on “How To Create A Countdown Timer Using JavaScript”

Leave a Reply

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