Count Down Timer using JavaScript - Code With Bishal (Using Bootstrap)


Learn how to make CountDown Timer using JavaScript

In this example you can learn HOW TO make CountDown Timer using JavaScript By Code With Bishal . Just Copy The Code From Here And Paste It Into Your Website. To Preview scroll the page. If you are having any problem viewing the code just refresh the page CountDown Timer using JavaScript is a lightweight and easy-to-use JS code that creates a JS CountDown timer. In this blog, there are four sections on the webpage, in the first section you can get the overview of the blog, in the second section there are few more coding blogs you might like,in the third section you can see the demo of the JS countdown timer, after that you can copy the code and paste it [that's the fourth section]

You might like this :

Budget Calculator - using JS (JavaScript) and Bootstrap
Few days ago
Show current time using JS
Few days ago
DIV ANIMATION with the help of HTML5 AND CSS
Few days ago
Email Validation using HTML, CSS and JavaScript
Few days ago
Change Color of Div onclick
Few days ago

This is an example


Count Down To New Year 2022




HTML Code

<!DOCTYPE html>
<html>
<head>
<title>Count Down To New Year using JavaScript - Code With Bishal</title>
</head>
<body>
/* by Code With Bishal - www.codewithbishal.com*/
<div class="cwb-time">
<h2>Count Down To New Year 2021
<ul class="count">
<li><p id="cwb"></p></li>
<li><p id="cwb2"></p></li>
<li><p id="cwb3"></p></li>
<li><p id="cwb4"></p></li>
</ul>
</div>
</body>
</html>
Copy Contents

CSS Code

<style>
.cwb-time {
text-align: center;
color: #FFCC70;
font-size: 40px;
letter-spacing: 7px;
margin-top: 31%;
left: 50%;
}

.count {
Width:50%;
Height:40px;
Margin: 0 auto;
}

.count li {
Display:inline-block;
Width:20%;
Text-align: center;
}

@media (max-width: 750px) {
.count li {
display: flex;
}
}
</style>

JS(Javascript) Code

<script>
var countDownDate = new Date("Jan 1, 2021 0:0:0").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
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);
document.getElementById("cwb").innerHTML = days + "d ";
document.getElementById("cwb2").innerHTML = + hours + "h ";
document.getElementById("cwb3").innerHTML = + minutes + "m ";
document.getElementById("cwb4").innerHTML = + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("cwb").innerHTML = "SET NEW TIME";
document.getElementById("cwb2").innerHTML = "SET NEW TIME";
document.getElementById("cwb3").innerHTML = "SET NEW TIME";
document.getElementById("cwb4").innerHTML = "SET NEW TIME";
}

}, 1000);
</script>