A countdown timer is a web-based or digital clock that appears on a landing page. It counts down from a predetermined date to signify the beginning or conclusion of an event.
A countdown timer serves a valuable function on eCommerce platforms by indicating the beginning or conclusion of a promotional offer. The primary objective of the countdown timer is to encourage customers to act swiftly, whether that means buying products or services.
It is essential to highlight that the JavaScript countdown timer is designed to be reusable, allowing us to implement it on a specific landing page. Additionally, this countdown functionality enables us to create multiple countdown timers within the same page.
Fundamentals of a Countdown Timer
A countdown timer serves as an ideal tool for showcasing the time remaining until a significant occasion, such as a deadline, birthday, or anniversary, on a website or blog.
The following are the fundamentals of a countdown timer:
- Set a suitable end date.
- Determine how much time is left.
- Convert the time to a required format.
- Create a reusable object from the clock data.
- Show the clock on the web page and stop the timer when it goes to zero.
Step 1: Set a suitable end date
A valid end date and time should be represented as a string that conforms to one of the formats recognized by the Date.parse method in JavaScript.
The given syntax uses the end date in javascript.
<script>
const date_time = new Date('December 02, 2022 01:02:03').getTime();
</script>
Step 2: Determine how much time is left.
The remaining time is determined by taking the current date and time and subtracting the closing date from it. Following this, the result is broken down into days, hours, minutes, and seconds.
The Math.floor method returns the greatest integer that is less than or equal to a given number.
<script>
const date_time1 = new Date('December 02, 2022 04:02:31').getTime();
const date_time2 = new Date('December 21, 2022 02:02:13').getTime();
const diff_time = date_time2.getTime() - date_time1.getTime();
</script>
Step 3: Convert the time to the required format.
The subsequent approach transforms time into a specified format.
<script>
const diff_time = date_time2.getTime() - date_time1.getTime();
const days_data = Math.floor(time_var / (1000 * 60 * 60 * 24));
const hours_data = Math.floor((time_var % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes_data = Math.floor((time_var % (1000 * 60 * 60)) / (1000 * 60));
const seconds_data = Math.floor((time_var % (1000 * 60)) / 1000);
</script>
Step 4: Display the outcome
The outcome is presented as output through the element with id="demovalue" in the following code.
document.getElementById("demovalue ").innerHTML = days_data + "days "
+ hours_data + "hours " + minutes_data + "minutes" + seconds_data + "second ";
Step 5: In the event that the countdown has concluded, proceed to compose some text.
When the countdown timer reaches zero, the phrase "expired" will be displayed on the screen.
var int_val = setInterval(function() {
const diff_time = date_time2.getTime() - date_time1.getTime();
if (diff_time < 0) {
clearInterval(int_val);
document.getElementById("demo_value").innerHTML = "Time Expired";
}, 550);
Examples
The provided illustrations demonstrate the implementation of a countdown timer in JavaScript utilizing various functions.
Example1
The countdown timer utilizes JavaScript to showcase time across various durations.
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: left;
font-size: 20px;
margin-top: -5px;
}
</style>
</head>
<body>
<h3> JavaScript Countdown Timer </h3>
<p id = "demo_value"></p>
<script>
//display start time
const date_time1 = new Date('December 02, 2022 04:02:31').getTime();
//display end time
const date_time2 = new Date('December 21, 2022 02:02:13').getTime();
//show the difference between the start and end time
const time_var = date_time2 - date_time1;
//convert difference time in days
const days_data = Math.floor(time_var / (1000 * 60 * 60 * 24));
//convert difference time in hours
const hours_data = Math.floor((time_var % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
//convert difference time in minutes
const minutes_data = Math.floor((time_var % (1000 * 60 * 60)) / (1000 * 60));
//convert difference time in the second
const seconds_data = Math.floor((time_var % (1000 * 60)) / 1000);
//display countdown timer
document.getElementById("demo_value").innerHTML = days_data + "days: " + hours_data + "hours: " + minutes_data + "minutes: " + seconds_data + "second ";
</script>
</body>
</html>
Output
The displayed image illustrates the countdown timer positioned beneath the output section.
Example2
The countdown timer utilizes JavaScript to show the remaining time, updating every second.
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: left;
font-size: 20px;
margin-top: -5px;
}
</style>
</head>
<body>
<h3> JavaScript Countdown Timer </h3>
<p id="demo_value"></p>
<script>
//display start time
const date_time1 = new Date('December 02, 2023 04:02:31').getTime();
var f_fun = setInterval(function() {
//display end time
const date_time2 = new Date().getTime();
//show the difference between the start and end time
const time_var = date_time1 - date_time2;
//convert difference time in days
const days_data = Math.floor(time_var / (1000 * 60 * 60 * 24));
//convert difference time in hours
const hours_data = Math.floor((time_var % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
//convert difference time in minutes
const minutes_data = Math.floor((time_var % (1000 * 60 * 60)) / (1000 * 60));
//convert difference time in the second
const seconds_data = Math.floor((time_var % (1000 * 60)) / 1000);
//display countdown timer
document.getElementById("demo_value").innerHTML = days_data + "days: " + hours_data + "hours: " + minutes_data + "minutes: " + seconds_data + "second ";
}, 500);
</script>
</body>
</html>
Output
The illustration displays the countdown timer positioned beneath the output.
Example3
The countdown timer utilizes JavaScript to exhibit the remaining time alongside the elapsed time. In cases where the time has expired—specifically when the interval between the two times results in a value that is either less than zero or negative—the countdown timer presents a message indicating that the time has expired.
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: left;
font-size: 20px;
margin-top: -5px;
}
</style>
</head>
<body>
<h3> JavaScript Countdown Timer </h3>
<p id = "demo_value"></p>
<script>
//display start time
const date_time1 = new Date('December 02, 2021 04:02:31').getTime();
var f_fun = setInterval(function() {
//display end time
const date_time2 = new Date().getTime();
//show the difference between the start and end time
const time_var = date_time1 - date_time2;
//convert difference time in days
const days_data = Math.floor(time_var / (1000 * 60 * 60 * 24));
//convert difference time in hours
const hours_data = Math.floor((time_var % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
//convert difference time in minutes
const minutes_data = Math.floor((time_var % (1000 * 60 * 60)) / (1000 * 60));
//convert difference time in the second
const seconds_data = Math.floor((time_var % (1000 * 60)) / 1000);
//display countdown timer
document.getElementById("demo_value").innerHTML = days_data + "days: " + hours_data + "hours: " + minutes_data + "minutes: " + seconds_data + "second ";
// If the countdown is expired or takes too much time, write some text
if (time_var < 0) {
clearInterval(f_fun); document.getElementById("demo_value").innerHTML = "TIME EXPIRED";
}
}, 5);
</script>
</body>
</html>
Output
The illustration displays the countdown timer positioned beneath the output.
Example4
The countdown timer showcases the passage of time through the use of JavaScript in conjunction with CSS styling. The CSS styles are employed to present a timer that aligns with the specifications set by the user.
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: left;
font-size: 20px;
margin-top: -5px;
}
#clocks > div{
padding: 12px;
border-radius: 5px;
background: grey;
display: inline-block;
color: white;
text-align: center;
}
#clocks div > span{
padding: 20px;
border-radius: 5px;
background: lightgray;
display: inline-block;
}
</style>
</head>
<body>
<h3> JavaScript Countdown Timer </h3>
<div id="clocks">
<div>
<span class="days_value" id="day_value"></span>
<div class="small">Days</div>
</div>
<div>
<span class="hours_value" id="hour_value"></span>
<div class="small">Hours</div>
</div>
<div>
<span class="minutes_value" id="minute_value"></span>
<div class="small">Minutes</div>
</div>
<div>
<span class="seconds_value" id="second_value"></span>
<div class="small">Seconds</div>
</div>
</div>
<p id = "demo_value"></p>
<script>
//display start time
const date_time1 = new Date('December 02, 2023 04:02:31').getTime();
var f_fun = setInterval(function() {
//display end time
const date_time2 = new Date().getTime();
//show the difference between start and end time
const time_var = date_time1 - date_time2;
//convert difference time in days
const days_data = Math.floor(time_var / (1000 * 60 * 60 * 24));
//convert difference time in hours
const hours_data = Math.floor((time_var % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
//convert difference time in minutes
const minutes_data = Math.floor((time_var % (1000 * 60 * 60)) / (1000 * 60));
//convert difference time in the second
const seconds_data = Math.floor((time_var % (1000 * 60)) / 1000);
//display countdown timer
document.getElementById("day_value").innerHTML = days_data;
document.getElementById("hour_value").innerHTML = hours_data;
document.getElementById("minute_value").innerHTML = minutes_data;
document.getElementById("second_value").innerHTML = seconds_data;
}, 5);
</script>
</body>
</html>
Output
The illustration displays the countdown timer positioned beneath the output.
Example5
The countdown timer illustrates the remaining time alongside an expired time using JavaScript and CSS styling. This countdown mechanism presents an expiration message when the timer hits zero.
<!DOCTYPE HTML>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
p {
text-align: left;
font-size: 20px;
margin-top: -5px;
}
#clocks > div{
padding: 12px;
border-radius: 5px;
background: grey;
display: inline-block;
color: white;
text-align: center;
}
#clocks div > span{
padding: 20px;
border-radius: 5px;
background: lightgray;
display: inline-block;
}
</style>
</head>
<body>
<h3> JavaScript Countdown Timer </h3>
<div id="clocks">
<div>
<span class="days_value" id="day_value"></span>
<div class="small">Days</div>
</div>
<div>
<span class="hours_value" id="hour_value"></span>
<div class="small">Hours</div>
</div>
<div>
<span class="minutes_value" id="minute_value"></span>
<div class="small">Minutes</div>
</div>
<div>
<span class="seconds_value" id="second_value"></span>
<div class="small">Seconds</div>
</div>
</div>
<br>
<p id = "demo_value"></p>
<script>
//display start time
const date_time1 = new Date('December 03, 2022 04:02:31').getTime();
var f_fun = setInterval(function() {
//display end time
const date_time2 = new Date('December 04, 2023 04:02:31').getTime();
//show the difference between the start and end time
const time_var = date_time1 - date_time2;
//convert difference time in days
const days_data = Math.floor(time_var / (1000 * 60 * 60 * 24));
//convert difference time in hours
const hours_data = Math.floor((time_var % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
//convert difference time in minutes
const minutes_data = Math.floor((time_var % (1000 * 60 * 60)) / (1000 * 60));
//convert difference time in the second
const seconds_data = Math.floor((time_var % (1000 * 60)) / 1000);
//display countdown timer
document.getElementById("day_value").innerHTML = days_data;
document.getElementById("hour_value").innerHTML = hours_data;
document.getElementById("minute_value").innerHTML = minutes_data;
document.getElementById("second_value").innerHTML = seconds_data;
// If the countdown is expired or takes too much time, write some text
if (time_var < 0) {
clearInterval(f_fun);
document.getElementById("demo_value").innerHTML = "TIME EXPIRED";
document.getElementById("day_value").innerHTML = '0';
document.getElementById("hour_value").innerHTML = '0';
document.getElementById("minute_value").innerHTML = '0';
document.getElementById("second_value").innerHTML = '0';
}
}, 5);
</script>
</body>
</html>
Output
The illustration displays the countdown timer positioned beneath the output.
Uses for a Countdown Timer
- Used to indicate how much time is remaining before an event begins.
- Used by e-commerce companies to indicate how long a sale is still going on.
- Websites use this while running promotions.
- used in football games, car racing games, etc.
- Used to indicate the left for setting bids on auction websites.
- Because there will be no dependencies, the code will be small.
- Because external scripts and style files won't need to be loaded, the website will operate more effectively.
- Instead of attempting to mold a plugin to his will, the user has created the clock to function exactly how he wants it to, giving him more control.
Advantages of using JavaScript to create a Countdown Time
Conclusion
The JavaScript countdown timer displays the elapsed time by breaking it down into days, hours, minutes, and seconds. This feature offers a straightforward and uncomplicated solution for applications requiring extensive coding and time iteration.