Posted on March 5, 2021, 8 p.m. by Bishal ( 7743)
countDownDate
, the value of the variable should be the date and time of the event. For example, in this case I am taking the value as Jan 10, 2022 0:0:0
the code will look like:var countDownDate = new Date("Jan 10, 2022 0:0:0");
setInterval
. The setInterval
function repeats a given function on every given time interval (in miliseconds) in our case it will be 1000ms or 1 second. The variable countDownDate
will return the time in miliseconds since 1970-01-01.var countDownDate = new Date("Jan 10, 2022 0:0:0");
var update = setInterval(function() {
// code here
}, 1000);
date
object. We will using getTime()
with the date
object. It will return the time in milisecond since 1970-01-01. We will use JavaScript variable now
to store the data.var countDownDate = new Date("Jan 10, 2022 0:0:0");
var update = setInterval(function() {
var now = new Date().getTime();
}, 1000);
TimeLeft
.var countDownDate = new Date("Jan 10, 2022 0:0:0");
var update = setInterval(function() {
var now = new Date().getTime();
var TimeLeft = countDownDate - now;
}, 1000);
Math.floor()
function. The Math.floor()
function returns the largest integer less than or equal to a given number.var countDownDate = new Date("Jan 10, 2022 0:0:0");
var update = setInterval(function() {
var now = new Date().getTime();
var TimeLeft = countDownDate - now;
var days = Math.floor(TimeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor((TimeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((TimeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((TimeLeft % (1000 * 60)) / 1000);
}, 1000);
.innerHTML
to return the value in HTML.
index.html
index.html
<!DOCTYPE html>
<html>
<head>
<title>Count Down timer using JavaScript - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
script.js
<head> </head>
of your HTML document:<script src="script.js"></script>
script.js
file:var countDownDate = new Date("Jan 10, 2022 0:0:0");
var update = setInterval(function() {
var now = new Date().getTime();
var TimeLeft = countDownDate - now;
var days = Math.floor(TimeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor((TimeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((TimeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((TimeLeft % (1000 * 60)) / 1000);
document.getElementById("daysLeft").innerHTML = days + "d ";
document.getElementById("hoursLeft").innerHTML = + hours + "h ";
document.getElementById("minutesLeft").innerHTML = + minutes + "m ";
document.getElementById("secondsLeft").innerHTML = + seconds + "s";
}, 1000);
style.css
<head> </head>
of your HTML document:<link href="style.css" rel="stylesheet">
style.css
file:.cwb-time {
text-align: center;
color: #FFCC70;
font-size: 40px;
letter-spacing: 7px;
}
.count {
display:flex;
flex-direction: row;
list-style: none;
width:90%;
height:40px;
margin: 0 auto;
justify-content: center;
}
.count li {
text-align: center;
}
@media (max-width: 750px) {
.count li {
display: flex;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Count Down To New Year using JavaScript - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
<div class="cwb-time">
<h2>Count Down To New Year 2021 <h2>
<ul class="count">
<li><p id="daysLeft"></p></li>
<li><p id="hoursLeft"></p></li>
<li><p id="minutesLeft"></p></li>
<li><p id="secondsLeft"></p></li>
</ul>
</div>
</body>
</html>
.cwb-time {
text-align: center;
color: #FFCC70;
font-size: 40px;
letter-spacing: 7px;
}
.count {
display:flex;
flex-direction: row;
list-style: none;
width:90%;
height:40px;
margin: 0 auto;
justify-content: center;
}
.count li {
text-align: center;
}
@media (max-width: 750px) {
.count li {
display: flex;
}
}
var countDownDate = new Date("Jan 10, 2022 0:0:0");
var update = setInterval(function() {
var now = new Date().getTime();
var TimeLeft = countDownDate - now;
var days = Math.floor(TimeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor((TimeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((TimeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((TimeLeft % (1000 * 60)) / 1000);
document.getElementById("daysLeft").innerHTML = days + "d ";
document.getElementById("hoursLeft").innerHTML = + hours + "h ";
document.getElementById("minutesLeft").innerHTML = + minutes + "m ";
document.getElementById("secondsLeft").innerHTML = + seconds + "s";
}, 1000);