countdown

How to Create a Countdown Timer in Website

Spread the love

In this blog, we will learn how to add countdown to our website, how we can add countdown to our website.

You’ll need to use JavaScript to add the countdown to the website.

Countdown in Website We can sometimes put countdown with Coming Soon in any page of ecommerce website and it is very useful for us. And we can also use it to remember someone’s birthday or to remind any festival.

How to make a countdown website, for this we have given scripting below, you can put countdown in your website by using it.

Countdown Ready Script

Here is the ready countdown script, copy and paste it into your page and add the countdown to your website.

Example:- Copy This Script Code:



<script>
// Set the date we're counting down to
var countDownDate = new Date("dec 23, 2021 24:00:00").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 + " Days " + hours + " Hours "
  + minutes + " Minutes " + seconds + " Seconds ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "Happy Birthday";
  }
}, 1000);
</script>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!---------- Code created by myprograming.com ----------->
  <title>Countdown Timer</title>
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<style type="text/css">
 
.demodiv{
  background: #f5f5f5;
  padding: 50px;
  text-align: center;
}
.demodiv h2{
  font-size: 75px;
}

</style>
<body>
<h1>How to Create a Countdown Timer in Website
</h1>
<div class="demodiv">
  
<h2>Coming Soon</h2>
<h1 id="demo"></h1>
</div>
 <script>
// Set the date we're counting down to
var countDownDate = new Date("dec 23, 2021 24:00:00").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 + " Days " + hours + " Hours "
  + minutes + " Minutes " + seconds + " Seconds ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "Happy Birthday";
  }
}, 1000);
</script>
</body>
</html>

Output:-

Countdown Timer

Coming Soon

How to Create Christmas Countdown

To create a Christmas countdown, we'll need a background photo and a script with some animation. Click on the link or pic below to see the Christmas countdown.

Christmas Countdown

Click Here Christmas Countdown


Spread the love

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *