How To Create a Countdown Timer
Mohammad Azad
Verified
Learn how to create a countdown timer with JavaScript.
// Set the date we're counting down to var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get today's date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); //Output the result in an element with id="hours", id="min" & id="sec" document.getElementById("hours").innerHTML = hours + "h "; document.getElementById("min").innerHTML = minutes + "m "; document.getElementById("sec").innerHTML = seconds + "s "; // If the count down is over, write some text if (distance < 0) { clearInterval(x); document.getElementById("hours").innerHTML = "EXPIRED"; document.getElementById("min").innerHTML = "EXPIRED"; document.getElementById("sec").innerHTML = "EXPIRED"; } }, 1000);
.countdown{ text-align:center; margin-top:50px; } span{ background: #8612ad; display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 65px; color: #fff; border-radius: 8px; font-size: 1.25rem; }
<div class="countdown"> <span id="hours"></span> <span id="min"></span> <span id="sec"></span> </div>
Comments
Leave a Comment