When building a coming soon or event page, you find yourself in search for a good way to display the remaining time.
A countdown gives the feel of urgency, and combined with an email field will yield more signups for your newsletter.
Creating a Countdown Timer
HTML
|
1 2 3 4 5 6 |
<div id="timer"> <div id="days"></div> <div id="hours"></div> <div id="minutes"></div> <div id="seconds"></div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<style type="text/css"> @import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic); body { font-family: 'Titillium Web', cursive; width: 800px; margin: 0 auto; text-align: center; color: white; background: #222; font-weight: 100; } div { display: inline-block; line-height: 1; padding: 20px; font-size: 40px; } span { display: block; font-size: 20px; color: white; } #days { font-size: 100px; color: #db4844; } #hours { font-size: 100px; color: #f07c22; } #minutes { font-size: 100px; color: #f6da74; } #seconds { font-size: 50px; color: #abcd58; } </style> |
Script
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript"> function makeTimer() { //var endTime = new Date("29 April 2018 9:56:00 GMT+01:00"); var endTime = new Date("04/21/2030 23:03:00"); endTime = (Date.parse(endTime) / 1000); var now = new Date(); now = (Date.parse(now) / 1000); var timeLeft = endTime - now; if(timeLeft < 0){ $("#days").html(00 + "<span>Days</span>"); $("#hours").html(00 + "<span>Hours</span>"); $("#minutes").html(00 + "<span>Minutes</span>"); $("#seconds").html(00 + "<span>Seconds</span>"); } else{ var days = Math.floor(timeLeft / 86400); var hours = Math.floor((timeLeft - (days * 86400)) / 3600); var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60); var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60))); if (hours < "10") { hours = "0" + hours; } if (minutes < "10") { minutes = "0" + minutes; } if (seconds < "10") { seconds = "0" + seconds; } $("#days").html(days + "<span>Days</span>"); $("#hours").html(hours + "<span>Hours</span>"); $("#minutes").html(minutes + "<span>Minutes</span>"); $("#seconds").html(seconds + "<span>Seconds</span>"); } } setInterval(function() { makeTimer(); }, 1000); </script> |
Done ! Output.
DevDocs
Home
