If you are looking for a jQuery countdown timer with days, hours, minutes, and seconds, then you are at the right place. We are showing you an example of a simple jQuery Countdown Timer.
Showing a countdown timer on a website is a fancy feature. Like on an eCommerce site, you are showing a countdown timer for attractive sale items.
We provide you configuration option which allows the user to set the end time value. You simply show the countdown timer for the remaining days, hours, minutes, and seconds via this jquery code and it will start counting it.
Create Simple jQuery Countdown Timer
Step 1: Create HTML and add CSS
First, create a simple HTML page and use the below HTML code on it.
|
1 2 3 4 5 6 7 8 |
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> <div id="timer"> <div id="days"></div> <div id="hours"></div> <div id="minutes"></div> <div id="seconds"></div> </div> |
Add CSS Style:
|
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 |
<style> 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: 30px; } 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> |
Step 2: Add jQuery countdown timer code on same HTML page.
|
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 |
<script type="text/javascript"> $(document).ready(function () { function makeTimer() { var endTime = new Date("29 September 2021 9:56:00 GMT+01:00"); endTime = (Date.parse(endTime) / 1000); var now = new Date(); now = (Date.parse(now) / 1000); var timeLeft = endTime - now; 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> |
Countdown Timer Output:
