Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a countdown timer with JavaScript?
A countdown timer in JavaScript uses setInterval() to update the display every second by calculating the time difference between a target date and the current time.
How It Works
The countdown timer works by:
- Setting a target date in the future
- Calculating the time difference every second
- Converting milliseconds to days, hours, minutes, and seconds
- Updating the display and stopping when time expires
Complete Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
margin-top: 50px;
}
.timer {
font-size: 48px;
color: white;
background-color: #6426d6;
padding: 20px;
border-radius: 10px;
display: inline-block;
margin: 20px 0;
}
.expired {
background-color: #dc3545;
}
</style>
</head>
<body>
<h1>Countdown Timer</h1>
<div class="timer" id="countdown"></div>
<script>
// Set countdown date to 24 hours from now
var countDownDate = new Date();
countDownDate.setHours(countDownDate.getHours() + 24);
var timer = setInterval(function() {
var now = new Date().getTime();
var timeLeft = countDownDate - now;
// Calculate time units
var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
// Display the countdown
document.getElementById("countdown").innerHTML =
days + "d " + hours + "h " + minutes + "m " + seconds + "s";
// When countdown expires
if (timeLeft < 0) {
clearInterval(timer);
document.getElementById("countdown").innerHTML = "TIME EXPIRED!";
document.getElementById("countdown").classList.add("expired");
}
}, 1000);
</script>
</body>
</html>
Key Components
Time Calculation: The core logic converts milliseconds into readable time units:
var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
setInterval(): Updates the display every 1000ms (1 second) and clearInterval() stops the timer when it reaches zero.
Customization Options
You can customize the timer by:
- Changing the target date format:
new Date("December 31, 2024 23:59:59") - Modifying the display format to show only hours and minutes
- Adding sound or visual effects when the timer expires
- Creating multiple timers for different events
Browser Compatibility
This countdown timer works in all modern browsers. The Date object and setInterval() are supported universally, making this a reliable cross-browser solution.
Conclusion
JavaScript countdown timers combine setInterval() with date calculations to create dynamic, real-time displays. The key is calculating time differences and converting milliseconds to human-readable formats.
736 Views
