Hi Developers,
Lets learn how to create a count down website using jquery . It is widely used during the launch of any events and offers etc.
To create a coming soon page using jquery initially we need to find the current date using the now() function and get the countdown end timestamp initially we set in the code. Then we should find the difference between two timestamps and then calculate the days , minutes and seconds and then displays using the DOM property
Set the New date when the count down should end and lets begin
You can also event display the website after the count down inside the
if(distance < 0 ) function using DOM property
<!DOCTYPE html>
<html>
<head>
<title>ITSolutionsGuides</title>
</head>
<style>
body, html {
height: 100%;
margin: 0;
}
.bgimg {
height: 100%;
background-position: center;
background-size: cover;
position: relative;
color: black;
font-family: "Courier New", Courier, monospace;
font-size: 25px;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
hr {
margin: auto;
width: 40%;
}
</style>
<body>
<div class="bgimg">
<div class="middle">
<h1>COMING SOON</h1>
<hr>
<p id="demo" style="font-size:30px"></p>
</div>
</div>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 14, 2025 04:30:00").getTime();
// Update the count down every 1 second
var countdownfunction = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an 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(countdownfunction);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.
Be the first to know about releases and tutorial news and solutions.
We care about your data in our privacy policy.
ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.
ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.
Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides