How to Create a JavaScript Countdown Timer

There are many a times, when you’re going to need a countdown clock for your project. You may have an event, a sale, a promotion, or a game, where you want to show off the remaining time to the viewers/visitors.

Well you can always opt for in built plugins, but here are the benefits you’ll get from using raw JavaScript to build your own counter:

Your code will be lightweight because it will have zero dependencies.
Your website will perform better. You won’t need to load external scripts and stylesheets.
You’ll have more control. You will have built the clock to behave exactly the way you want it to (rather than trying to bend a plugin to your will).

–

So, without further ado.. Let’s the coding begin 🙂

p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}

HML Part will be

<p id="demo"></p>

Now the final step : JavaScript :

<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  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);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

Complete Code will look like this :

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}
</style>
</head>
<body>

<p id="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2022 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  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);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

</body>
</html>

Output will look like this

<br /> See the Pen <a href="https://codepen.io/adaptabiz/pen/xxRZzar"><br /> Create a JavaScript Countdown Timer</a> by adaptabiz (<a href="https://codepen.io/adaptabiz">@adaptabiz</a>)<br /> on <a href="https://codepen.io">CodePen</a>.<br />

How to Create a JavaScript Countdown Timer