A JavaScript countdown timer is a programming technique that allows developers to create timers that count down from a specified duration. By using JavaScript’s built-in functions and timers, developers can display a visually appealing countdown on a webpage.
The syntax for creating a JavaScript countdown timer can vary depending on the specific implementation and requirements. However, here is a general outline of the syntax:
1. Set the initial timer duration or target end time.
var targetTime = new Date(); // Set target end time
targetTime.setSeconds(targetTime.getSeconds() + 60); // Example: Add 60 seconds to the current time
2. Create a function to update and display the countdown.
function updateCountdown() {
var currentTime = new Date(); // Get current time
var remainingTime = targetTime - currentTime; // Calculate remaining time
// Perform calculations to extract hours, minutes, and seconds from remainingTime
// Display the countdown
document.getElementById("countdown").innerHTML = hours + "h " + minutes + "m " + seconds + "s";
// Check if the countdown has reached zero
if (remainingTime <= 0) {
clearInterval(countdownInterval); // Clear the interval
document.getElementById("countdown").innerHTML = "Expired"; // Display "Expired" or take appropriate action
}
}
3. Call the updateCountdown() function at regular intervals using setInterval().
var countdownInterval = setInterval(updateCountdown, 1000); // Update the countdown every second
4. HTML markup to display the countdown timer.
<p>Countdown: <span id="countdown"></span></p>
JavaScript countdown timer Examples
Simple example codes.
JavaScript countdown timer 60 seconds
<!DOCTYPE html>
<html>
<head>
<title>Countdown Timer</title>
<script>
function countdown() {
var seconds = 60; // Number of seconds to count down
var countdownTimer = setInterval(function() {
seconds--;
document.getElementById("countdown").innerHTML = seconds + "s";
if (seconds <= 0) {
clearInterval(countdownTimer);
document.getElementById("countdown").innerHTML = "Expired";
}
}, 1000);
}
</script>
</head>
<body>
<h2>Countdown Timer</h2>
<p>Countdown for 60 seconds: <span id="countdown"></span></p>
<button onclick="countdown()">Start Timer</button>
</body>
</html>
Output:
30 minutes countdown timer in JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Countdown Timer</title>
<script>
function countdown() {
var minutes = 30; // Number of minutes to count down
var seconds = minutes * 60; // Convert minutes to seconds
var countdownTimer = setInterval(function() {
var minutesRemaining = Math.floor(seconds / 60);
var secondsRemaining = seconds % 60;
document.getElementById("countdown").innerHTML =
minutesRemaining + "m " + secondsRemaining + "s";
if (seconds <= 0) {
clearInterval(countdownTimer);
document.getElementById("countdown").innerHTML = "Expired";
}
seconds--;
}, 1000);
}
</script>
</head>
<body>
<h2>Countdown Timer</h2>
<p>Countdown for 30 minutes: <span id="countdown"></span></p>
<button onclick="countdown()">Start Timer</button>
</body>
</html>
Output:
24 hour countdown timer JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Countdown Timer</title>
<script>
function countdown() {
var hours = 24; // Number of hours to count down
var minutes = hours * 60; // Convert hours to minutes
var seconds = minutes * 60; // Convert minutes to seconds
var countdownTimer = setInterval(function() {
var hoursRemaining = Math.floor(seconds / 3600);
var minutesRemaining = Math.floor((seconds % 3600) / 60);
var secondsRemaining = (seconds % 3600) % 60;
document.getElementById("countdown").innerHTML =
hoursRemaining + "h " + minutesRemaining + "m " + secondsRemaining + "s";
if (seconds <= 0) {
clearInterval(countdownTimer);
document.getElementById("countdown").innerHTML = "Expired";
}
seconds--;
}, 1000);
}
</script>
</head>
<body>
<h2>Countdown Timer</h2>
<p>Countdown for 24 hours: <span id="countdown"></span></p>
<button onclick="countdown()">Start Timer</button>
</body>
</html>
Output:
Here’s an example of a JavaScript countdown timer for 60 seconds, 30 minutes, and 24 hours:
<!DOCTYPE html>
<html>
<head>
<title>Countdown Timer</title>
<script>
// Countdown timer for 60 seconds
function countdown60Seconds() {
var countDownDate = new Date().getTime() + 60000; // 60 seconds from now
var countdownTimer = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("countdown-60s").innerHTML =
seconds + "s";
if (distance < 0) {
clearInterval(countdownTimer);
document.getElementById("countdown-60s").innerHTML = "Expired";
}
}, 1000);
}
// Countdown timer for 30 minutes
function countdown30Minutes() {
var countDownDate = new Date().getTime() + 1800000; // 30 minutes from now
var countdownTimer = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("countdown-30m").innerHTML =
minutes + "m " + seconds + "s";
if (distance < 0) {
clearInterval(countdownTimer);
document.getElementById("countdown-30m").innerHTML = "Expired";
}
}, 1000);
}
// Countdown timer for 24 hours
function countdown24Hours() {
var countDownDate = new Date().getTime() + 86400000; // 24 hours from now
var countdownTimer = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
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);
document.getElementById("countdown-24h").innerHTML =
hours + "h " + minutes + "m " + seconds + "s";
if (distance < 0) {
clearInterval(countdownTimer);
document.getElementById("countdown-24h").innerHTML = "Expired";
}
}, 1000);
}
</script>
</head>
<body>
<h2>Countdown Timer</h2>
<p>Countdown for 60 seconds: <span id="countdown-60s"></span></p>
<button onclick="countdown60Seconds()">Start 60s Timer</button>
<p>Countdown for 30 minutes: <span id="countdown-30m"></span></p>
<button onclick="countdown30Minutes()">Start 30m Timer</button>
<p>Countdown for 24 hours: <span id="countdown-24h"></span></p>
<button onclick="countdown24Hours()">Start 24h Timer</button>
</body>
</html>
In this example, we define a countdown() function that initializes the timer with 24 hours. We first convert the hours to minutes by multiplying it by 60, and then convert the minutes to seconds by multiplying it by 60 again. Using setInterval(), we update the timer every second by decrementing the seconds variable. We calculate the remaining hours, minutes, and seconds, and display them in the <span> element with the id “countdown”. When the timer reaches zero, it clears the interval and displays “Expired”.
This interactive feature can be useful for various applications, such as displaying time-sensitive information, implementing time-limited activities or promotions, or creating countdowns for events. With JavaScript’s flexibility, developers can customize the countdown timer to fit their specific requirements, enabling a dynamic and engaging user experience.
Comment if you have any doubts or suggestions on this Js timer topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version