How To Create A Countdown Timer Using JavaScript - GeeksforGeeks

14 Nov, 2017
A countdown timer is an accurate timer that can be used for a website or blog to display the count down to any special event, such as a birthday or anniversary.Basics of a countdown timer are :
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.
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.
Step 1 : Set a Valid End DateThe Valid end date and time should be a string in any of the formats understood by JavaScript’s Date.parse() method.
Step 2 : Calculate Remaining TimeFirst we calculate the time remaining by subtracting the deadline by 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.
Step 3 : Output the resultIn the code below the result is given as output by id=”demo”
Step 4 : Write some text if the countdown is overIf the countdown timer is over then “expired” will be displayed on the screen.INPUT :
<!DOCTYPE HTML><html><head><style>p {  text-align: center;  font-size: 60px;}</style></head><body><p id="demo"></p><script>var deadline = new Date("Jan 5, 2018 15:37:25").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("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";    if (t < 0) {        clearInterval(x);        document.getElementById("demo").innerHTML = "EXPIRED";    }}, 1000);</script>  </body></html>
When the countdown is over
Countdown Timer with CSS using JavaScriptINPUT:
<!DOCTYPE HTML><html><head><style>body{    text-align: center;    background: #00ECB9;  font-family: sans-serif;  font-weight: 100;}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;}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="demo"></p>  <script>  var deadline = new Date("dec 31, 2017 15:37:25").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("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.
This article is contributed by Shubrodeep Banerjee. If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.
GBlog
Technical Scripter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Roadmap to Become a Web Developer in 2022
DSA Sheet by Love Babbar
GET and POST requests using Python
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Working with csv files in Python
Types of Software Testing
Top 10 Angular Libraries For Web Developers
Differences between Procedural and Object Oriented Programming
A Freshers Guide To Programming
Top 10 System Design Interview Questions and Answers