A countdown timer is a great feature for any website or web application, whether you’re counting down to a special event, launch, or deadline. In this tutorial, we’ll walk through creating a custom countdown timer using HTML and JavaScript that displays days, hours, minutes, and seconds in separate containers with individual class names.
What You’ll Learn in This Guide:
- How to create a countdown timer that updates every second.
- How to divide the time into days, hours, minutes, and seconds.
- How to dynamically update the timer values on your webpage.
- How to hide the countdown timer once the countdown finishes.
Countdown Timer Output:
00
Days
00
Hours
00
Minutes
00
Seconds
Here’s the complete code to build your custom countdown timer:
<style>
/* Styling for the countdown container */
.countdown-container {
font-size: 24px;
font-weight: bold;
text-align: center;
margin-top: 50px;
}
/* Styling individual time units */
.time-unit {
display: inline-block;
padding: 10px;
margin: 5px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 5px;
}
.time-label {
font-size: 16px;
display: block;
}
.time-value {
font-size: 24px;
font-weight: bold;
}
.time-up-message {
font-size: 30px;
color: red;
}
</style>
<div class="countdown-container" id="timer-container">
<div class="time-unit" id="days">
<span class="time-value" id="days-value">00</span>
<span class="time-label">Days</span>
</div>
<div class="time-unit" id="hours">
<span class="time-value" id="hours-value">00</span>
<span class="time-label">Hours</span>
</div>
<div class="time-unit" id="minutes">
<span class="time-value" id="minutes-value">00</span>
<span class="time-label">Minutes</span>
</div>
<div class="time-unit" id="seconds">
<span class="time-value" id="seconds-value">00</span>
<span class="time-label">Seconds</span>
</div>
</div>
<script>
// Set the countdown target time (for example, 5 days, 4 hours, 30 minutes, and 45 seconds)
var targetTime = new Date();
targetTime.setDate(targetTime.getDate() + 5); // 5 days from now
targetTime.setHours(4); // 4 hours
targetTime.setMinutes(30); // 30 minutes
targetTime.setSeconds(45); // 45 seconds
// Update the countdown every second
var countdownInterval = setInterval(function() {
var currentTime = new Date();
var timeRemaining = targetTime - currentTime;
if (timeRemaining <= 0) {
clearInterval(countdownInterval);
document.getElementById("timer-container").innerHTML = "<span class='time-up-message'>Time's Up!</span>";
} else {
// Calculate days, hours, minutes, and seconds
var days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
var hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
// Update the display for each time unit
document.getElementById("days-value").textContent = (days < 10 ? "0" : "") + days;
document.getElementById("hours-value").textContent = (hours < 10 ? "0" : "") + hours;
document.getElementById("minutes-value").textContent = (minutes < 10 ? "0" : "") + minutes;
document.getElementById("seconds-value").textContent = (seconds < 10 ? "0" : "") + seconds;
}
}, 1000);
</script>
Key Features of This Countdown Timer:
- Customizable Time: The
targetTimeis easily adjustable. You can set the timer to count down from any future date and time by changing thetargetTimevalues. - Divisions for Days, Hours, Minutes, and Seconds: Each time unit has its own
<div>with individual classes, making it easy to style or modify each unit. - Responsive and Easy to Implement: This code is mobile-friendly and integrates easily into any webpage or web application.
- Dynamic Updates: The countdown updates every second, ensuring the time is accurate and up-to-date.
- “Time’s Up!” Message: Once the countdown reaches zero, the timer is replaced with a message saying “Time’s Up!” to notify the user.
How to Use This Countdown Timer:
- Copy the Code: Copy the HTML, CSS, and JavaScript provided above into your own webpage.
- Adjust the Target Time: Modify the
targetTimevariable in the script to set the countdown to any desired date and time. - Style the Timer: Customize the CSS to fit your website’s design. Each time unit (
.time-unit,.time-label, and.time-value) is styled separately for easy customization.
Last updated on: November 30, 2024