Countdown timer is very helpful when you launch a product or course on our blog or website. To show your product you can create a banner with countdown timer, create a countdown timer in JavaScript is very easy but there are some online plugin for most of the CMS like WordPress for that.
But for the small thing like countdown timer is not good to add plugin in your blog, it will get extra load on your server.
In this article you will learn how to create a countdown timer in JavaScript? It’s not matter you are programmer or not even non programmer background person are easily create a countdown timer for their blog.
So, let’s start countdown timer in javaScript tutorial
Set the countdown date variable
First we need a date in which our countdown time to stop. For this we declare a variable and in this variable hold the end date with getTime() method. The getTime() metod hold date into millisecond.
After that we divide endDate variable by 1000. Why? Because variable hold date into millisecond and we convert millisecond into second.
var endDate=new Date(25 Dec 2021 12:08:00).getTime()/1000; Now create a two more variable current date and difference between current ad end dates.
To working countdown we need the current date and time, so we make a new variable now it holds current date and time with getTime method and divided this variable by 1000.
After that we declare a new variable diff it holds time remaining between current date and end date in second.
var now=new Date().getTime()/1000;
var diff=Math.floor(endDate-now);
Calculate Days, Hours, Minute, and Second
For this we declare four variable days, hours, min and sec. In those variable holds the time in days, hours, min, and sec.
var days=Math.floor(diff/(60*60*24));
var hours=Math.floor(diff%(60*60*24)/(60*60));
var mins=Math.floor(diff%(60*60)/(60));
var sec=Math.floor(diff%(60));
Output to users
To show the values for the days, hours, minutes, and seconds to the users through HTML. The following code replaces inner HTML elements that have their own IDs, with values.
document.getElementById("days").innerHTML=days;
document.getElementById("hours").innerHTML=hours;
document.getElementById("min").innerHTML=mins;
document.getElementById("sec").innerHTML=sec;
HTML code
<h2 id="s"></h2>
<div id=”box”>
<div class="timer">
<div class="time" id="days"></div>
<div class="title">Days</div>
</div>
<div class="timer">
<div class="time" id="hours"></div>
<div class="title">Hours</div>
</div>
<div class="timer">
<div class="time" id="min"></div>
<div class="title">Min</div>
</div>
<div class="timer">
<div class="time" id="sec"></div>
<div class="title">Sec</div>
</div>
</div>
After that you run this code you can see the countdown time but time is not running when you refresh this page you get the new time. Remove this bug we need a set Interval function. Set interval function run over code on a particular time.
When time is over display a message Time over use this code.
if(diff==0){
document.getElementById("s").style.display="block";
document.getElementById("box").style.display="none";
}
Full JavaScript Code countdown timer
setInterval(function(){
var endDate=new Date(25 Dec 2021 12:08:00).getTime()/1000;
var now=new Date().getTime()/1000;
var diff=Math.floor(endDate-now);
var days=Math.floor(diff/(60*60*24));
var hours=Math.floor(diff%(60*60*24)/(60*60));
var min=Math.floor(diff%(60*60)/(60));
var sec=Math.floor(diff%(60));
if(diff==0){
document.getElementById("s").style.display="block";
document.getElementById("box").style.display="none";
}
document.getElementById("days").innerHTML=days;
document.getElementById("hours").innerHTML=hours;
document.getElementById("min").innerHTML=min;
document.getElementById("sec").innerHTML=sec;
},1000);
When time is over display a message Time over use this code.
if(diff==0){
document.getElementById("s").style.display="block";
document.getElementById("box").style.display="none";
}
Also Read
