How to create an animated countdown timer using HTML
In this tutorial, we will learn How to create an animated countdown timer using HTML. We create an animated countdown timer using HTML, CSS, and JavaScript. animated countdown timer main used when we create a website and we just like to display the home page coming soon with 200 days, 20 hours, 15 minutes, 20second. when the domain did purchase. and websites are not created, at that time we display an animated countdown timer.
In this, post, we only use HTML, CSS, and JavaScript to create an animated countdown timer. And animated countdown timer is responsive to all device’s supports.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>How to create an animated countdown countdown using html</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
body {
background: url('countdown.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 300px;
}
#countdown {
margin-top: 16%;
margin-bottom: 16%;
}
#countdown div {
background-color: #1814145d;
color: #ffffff;
width: 100px;
height: 105px;
border-radius: 5px;
font-size: 35px;
font-weight: 700;
margin-left: 10px;
margin-right: 10px;
}
#countdown div span {
display: block;
margin-top: -2px;
font-size: 15px;
font-weight: 500;
}
@media only screen and (max-width: 767px) {
#countdown div {
width: 95px;
height: 100px;
font-size: 32px;
margin-top: 20px;
}
#countdown div span {
font-size: 14px;
}
}
</style>
</head>
<body>
<div id="countdown" class="flex-wrap d-flex justify-content-center">
<div id="days" class="align-items-center flex-column d-flex justify-content-center"></div>
<div id="hours" class="align-items-center flex-column d-flex justify-content-center"></div>
<div id="minutes" class="align-items-center flex-column d-flex justify-content-center"></div>
<div id="seconds" class="align-items-center flex-column d-flex justify-content-center"></div>
</div>
<script>
function countDown() {
var last = new Date("01/01/2023");
var last = (Date.parse(last)) / 1000;
var current = new Date();
var current = (Date.parse(current) / 1000);
var leftTime = last - current;
var days = Math.floor(leftTime / 86400);
var hours = Math.floor((leftTime - (days * 86400)) / 3600);
var minutes = Math.floor((leftTime - (days * 86400) - (hours * 3600 )) / 60);
var seconds = Math.floor((leftTime - (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() { countDown(); }, 0);
</script>
</body>
</html>Output:
