JavaScript Countdown Timer

Hello Developers, I have shared a standard source code to create a JavaScript Countdown Timer with days, hours, minutes & seconds step by step. It will be very helpful if you need to integrate a countdown timer feature in your project.

Once you complete this article, You will definitely learn to implement it quickly on your website, and also you will be able to set an expiry date & time according to your needs.

Learn also –

Detect Internet Connection using JavaScript

JavaScript Password Strength Checker

Fill Current address same as permanent address in javaScript

You can integrate a countdown timer for online exams, shopping deal offers, and other purposes. So that users can complete their tasks & shipping before the expiration time.

Days, Hours, Minutes & Seconds Countdown Timer in JavaScript

I am going to start to create a top-level countdown timer that is frequently used on many websites. Also, It might be exactly suitable for your needs. So, you can directly use my source code in your project. Even you can customize it but you will have to do it carefully otherwise you may face an unwanted error.

When you set your own expiry date & time and run it then the countdown will start to display the remaining expiration time/deadline.

1. Show Countdown Timer using HTML

You can directly use this HTML code in your project. But before using it, you should understand the following points –

• div with id=”countdownTimer” is a parent div in which the expiry message, date & time will be displayed
• date will display in the div that has  id=”days” 
• hours will display in the div that has id=”hours”
• minutes will display in the div that has id=”minutes”
• seconds will display in the div that has id=”seconds”
• <span> tag contains the title of days, hours, minutes & seconds
• div with no id that remains within the parent div with a single colon (:)

<p id="countdownTitle">The deal ends in</p>
<div id="countdownTimer">
    <div id="days"></div>
    <span>Days </span>
    <div> :</div>
    <div id="hours"></div>
     <span>Hours </span>
    <div> :</div>
   
    <div id="minutes"></div>
        <span>Minutes </span>
    <div> :</div>

    <div id="seconds"></div>

    <span>Seconds</span>
</div>

2. Design Countdown Timer using CSS

You can design countdown time using this CSS code. Even you can write your own CSS code according to your project design pattern

#countdownTitle{
text-align:center;
font-size:20px;
color:red;}
#countdownTimer, #dateTimeText {
  display: flex;
  justify-content: center;
  background:#04AA6D;
  color:white;
}
#countdownTimer> div  {
  text-align: center;
  font-size: 25px;
  padding: 5px 5px;
}
#countdownTimer> span{
font-size:15px;
position:relative;
top:15px;
}

3. Create Countdown Timer using JavaScript

You can use this javascript code to create countdown time, But before using it, You have to understand the following points –

You can set your own expiry date & time to the expiryDateTime

countdownTimer(expiryDateTime)

It is a custom function that accepts only single parameters expiryDateTime and returns countdown days, hours, minutes & seconds on an HTML page

It is called within the load event to display a countdown timer just after loading the web page. If you need to call it another event, you can put this function into that event

let expiryDateTime = "5 Nov 2021 15:30:25";

window.addEventListener('load', function(event){
   countdownTimer(expiryDateTime);
});

function countdownTimer(expiryDateTime){

    var countdownDateTime = new Date(expiryDateTime).getTime();
    
  
var timeInterval = setInterval(function() {

   var currentDateTime = new Date().getTime();  
  
   var remainingDayTime = countdownDateTime - currentDateTime;
 
   var totalDays = Math.floor(remainingDayTime / (1000 * 60 * 60 * 24));
   var totalHours = Math.floor((remainingDayTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
   var totalMinutes = Math.floor((remainingDayTime % (1000 * 60 * 60)) / (1000 * 60));
   var totalSeconds = Math.floor((remainingDayTime % (1000 * 60)) / 1000);
   
   document.getElementById("days").innerHTML = totalDays;
   document.getElementById("hours").innerHTML = totalHours;
   document.getElementById("minutes").innerHTML = totalMinutes;
   document.getElementById("seconds").innerHTML = totalSeconds;
  
    
  
  if (remainingDayTime < 0) {
    clearInterval(timeInterval);
    document.getElementById("countdownTimer").innerHTML = "Deal ended";
   }
  
 }, 1000);

}