Jquery countdown timer hours minutes seconds | Jquery reverse Countdown Timer
generating preview
<html>
<head>
<style>
body {
font-family: 'Titillium Web', cursive;
width: 100%;
margin: 0 auto;
text-align: center;
color: white;
background: #222;
font-weight: 100;
}
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);
div {
display: inline-block;
line-height: 1;
padding: 20px;
font-size: 20px;
}
span {
display: block;
font-size: 20px;
color: white;
}
#days {
font-size: 50px;
color: #db4844;
}
#hours {
font-size: 50px;
color: #f07c22;
}
#minutes {
font-size: 50px;
color: #f6da74;
}
#seconds {
font-size: 25px;
color: #abcd58;
}
</style>
</head>
<body>
<div id="timer">
<div id="days"></div>
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
function makeTimer() {
// var endTime = new Date("29 April 2018 9:56:00 GMT+01:00");
var endTime = new Date("29 April 2025 9:56:00 GMT+01:00");
endTime = (Date.parse(endTime) / 1000);
var now = new Date();
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; }
$("#days").html(days + "<span>Days</span>");
$("#hours").html(hours + "<span>Hours</span>");
$("#minutes").html(minutes + "<span>Minutes</span>");
$("#seconds").html(seconds + "<span>Seconds</span>");
}
setInterval(function() { makeTimer(); }, 1000);
</script>
</body>
</html>
How to Use this Elements / Source Code:
You Can Use Jquery countdown timer hours minutes seconds elements by select the above source code (CTRL + A) then copy the code (CTRL + C) and paste (CTRL + V) it in a blank html Page to initially test it. Then you can use the Above Jquery reverse Countdown Timer where ever you want for your project.
Usage of Jquery reverse Countdown Timer countdown with hours minutes seconds:
You Can Use this Jquery reverse Countdown Timer countdown with hours minutes seconds elements before starting an event or close to an event. This count down can be a reminder also.