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