This is a simple way to implement a countdown timer with jQuery. I will be working on a feature that says something when the countdown is completed. But for now it just countdowns. I have it using jQuery only for the .html() function, but that can easily be removed if you do not want to use jQuery. This is counting down until September 1, 2020
$(document).ready(function() {
function makeTimer() {
var endTime = new Date("September 01, 2020 00:00:00");
var endTime = (Date.parse(endTime)) / 1000;
var now = new Date();
var now = (Date.parse(now) / 1000);
var timeLeft = endTime - now;
var days = Math.floor(timeLeft / 86400);
var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
if (hours < "10") { hours = "0" + hours; }
if (minutes < "10") { minutes = "0" + minutes; }
if (seconds < "10") { seconds = "0" + seconds; }
$("#timer #days").html("<span>Days</span>" + days);
$("#timer #hours").html("<span>Hours</span>" + hours);
$("#timer #minutes").html("<span>Minutes</span>" + minutes);
$("#timer #seconds").html("<span>Seconds</span>" + seconds);
}
setInterval(function() { makeTimer(); }, 1000);
});
Here is how i have it implemented here
<div id="timer">
<ul>
<li id="days">...</li>
<li id="hours">...</li>
<li id="minutes">...</li>
<li id="seconds">...</li>
</ul>
</div>
Here is the CSS
#timer ul { list-style-type: none; }
#timer ul li span { display: block; float: left; width: 100px; }
You can
Fork this at GitHub (my first project over there, woohoo!)