Create a JavaScript Countdown Timer

A countdown timer is a wen or virtual clock that is displayed on a landing page. And it drops down from a specific date to represent the start or end of an event.

A countdown timer can be used on eCommerce websites to display the start (or end) of an offer. The countdown timer's purpose is to persuade customers to take action, such as purchasing products or services.

It's important to note that the javascript countdown timer creates reusable, so we can use it on a certain landing page. We can also use this countdown to generate new countdown timers on the same page.

Fundamentals of a Countdown Timer

A countdown timer is a perfect timer that can be used to display the countdown to any special event, 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

Valid end date and time must be a string in one of the formats supported by JavaScript's Date.parse() method.

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 time remaining is calculated by subtracting the closing date from the current date and time, and then the number of days, hours, minutes, and seconds is calculated.

The Math.floor() function shows the largest integer that is less than or equal to a specific value.

<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 following method converts time into a particular 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 result is displayed as output by id="demovalue" in the code below.

document.getElementById("demovalue ").innerHTML = days_data + "days " 
+ hours_data + "hours " + minutes_data + "minutes" + seconds_data + "second ";

Step 5: If the countdown has ended, write some text.

If the countdown timer runs out, the word "expired" will appear 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 given examples show the countdown timer in javascript with different functions.

Example1

The countdown timer displays time with different time spans using JavaScript.

<!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