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