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 set a countdown timer in javascript?
We can set a countdown timer in JavaScript using the setInterval() method. This method continuously calls a function or executes a code snippet with a fixed time delay between every call.
The setInterval() method calls a function at described intervals in milliseconds. It continues calling the function until the clearInterval() is called, or the window is closed.
Syntax
Following is the syntax of this method ?
setInterval(function, milliseconds);
Parameters
The setInterval method accepts two parameters:
function ? A function containing a block of code designed to perform a particular task.
milliseconds ? The time interval between the execution of the function.
Return Value
This method returns a positive integer representing the interval ID that can be used with clearInterval().
Example: Creating a Countdown Timer
In the following example, we are creating a countdown timer from January 1, 2027 to the current time:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Countdown Timer</title>
<style>
h3 {
text-align: center;
margin-top: 20px;
font-size: 24px;
color: #333;
}
</style>
</head>
<body>
<h3 id="time"></h3>
<script>
// Set the date we are counting down to
var countDown = new Date("Jan 1, 2027 12:12:50").getTime();
// Update the countdown every 1 second
var update = setInterval(function () {
// Get today's date and time
var now = new Date().getTime();
// Find the difference between countDown and now
var diff = countDown - now;
// Calculate time in days, hours, minutes, and seconds
var days = Math.floor(diff / (1000 * 60 * 60 * 24));
var hrs = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((diff % (1000 * 60)) / 1000);
// Display the result in the element with id="time"
document.getElementById("time").innerHTML =
days + "d " + hrs + "h " + minutes + "m " + seconds + "s";
// If countdown is over, stop the timer
if (diff < 0) {
clearInterval(update);
document.getElementById("time").innerHTML = "TIME EXPIRED!";
}
}, 1000);
</script>
</body>
</html>
How It Works
The countdown timer works by:
Setting Target Date: We define the future date using
new Date()Calculating Difference: Every second, we calculate the time remaining by subtracting current time from target date
Converting Time Units: The difference in milliseconds is converted to days, hours, minutes, and seconds
Updating Display: The formatted time is displayed in the HTML element
Stopping Timer: When the countdown reaches zero, we clear the interval and show expiration message
Key Points
Use
setInterval()for repeated execution every 1000ms (1 second)Always use
clearInterval()to stop the timer when countdown reaches zeroThe
getTime()method returns milliseconds since January 1, 1970Math calculations convert milliseconds to human-readable time format
Conclusion
Creating a countdown timer in JavaScript is straightforward using setInterval(). The key is calculating the time difference and converting milliseconds to readable format while properly clearing the interval when the countdown ends.
9K+ Views
