Jquery Countdown Timer

In this article, we will understand the jquery countdown timer in detail. Countdown Clock is a small plain jQuery countdown timer plugin which counts down in years, months, days, hours, minutes, seconds to a given date. In other words, it will display how many days, months and hours left from a given date.

Following are the examples of jquery countdown timer.

Example 1:

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of  countdown timer using jquery </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jquery.com/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);
body {
  font-family: 'Titillium Web', cursive;
  width: 800px;
  margin: 0 auto;
  text-align: center;
  color: white;
  background: #222;
  font-weight: 100;
}
html {
    padding: 0;
    margin: 0;
        font-family: "Open Sans", Arial, Helvetica;
      -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
body {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%); 
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
h1 {
  position: relative;
  color: #FFF;
  font-weight: 100;
  font-size: 40px;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
}
h2 {
  font-weight: 200;
  font-size: 30px;
  padding: 10;
  margin: 10;
  line-height: 1;
  color: black;
  letter-spacing: 2px;
  text-align: center;
}
div {
  display: inline-block;
  line-height: 1;
  padding: 20px;
  font-size: 40px;
}
span {
  display: block;
  font-size: 20px;
  color: white;
}
#days {
  font-size: 100px;
  color: #db4844;
}
#hours {
  font-size: 100px;
  color: #f07c22;
}
#minutes {
  font-size: 100px;
  color: #f6da74;
}
#seconds {
  font-size: 50px;
  color: #abcd58;
}
</style>
<body>
<h1> Example </h1>
<h2> Jquery Countdown timer </h2>
<div id = "timer">
  <div id = "days"> </div>
  <div id = "hours"> </div>
  <div id = "minutes"> </div>
  <div id = "seconds"> </div>
</div>
<script>
function makeTimer() {
			var endTime = new Date("29 April 2018 9:56:00 GMT+01:00");	
		var endTime = new Date("29 April 2020 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>

Explanation:

In the above example, we created a countdown timer using jquery. It counts how many days, minutes and seconds left from given time.

Output:

Following is the output of this example.

Example 2:

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of  countdown timer using jquery </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jquery.com/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>
@import url(https://fonts.googleapis.com/css?family=Dosis:300,400);
body {
  font-family: 'Dosis', sans-serif;
  margin: 0 auto;
  text-align: center;
  color: white;
  background: #111;
}
html {
    padding: 0;
    margin: 0;
        font-family: "Open Sans", Arial, Helvetica;
      -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
body {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%); 
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
h1 {
  position: relative;
  color: #FFF;
  font-weight: 100;
  font-size: 40px;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
}
h2 {
  font-weight: 200;
  font-size: 30px;
  padding: 10;
  margin: 10;
  line-height: 1;
  color: black;
  letter-spacing: 2px;
  text-align: center;
}
span {
  display: inline-block;
  line-height: 1;
  padding: 20px;
  font-size: 40px;
  font-weight: 300;
  color: #1a2a6c;
  background: -webkit-linear-gradient(to right, #E684AE, #79CBCA, #77A1D3);
  background: linear-gradient(to right, #E684AE, #79CBCA, #77A1D3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: hue 5s infinite linear;
  animation: hue 5s infinite linear;
  vertical-align: bottom;
}
span > span {
  display: block;
  font-size: 20px;
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: none;
}
#days {
  font-size: 100px;
}
#hours {
  font-size: 80px;
}
#minutes {
  font-size: 55px;
}
#seconds {
  font-size: 35px;
}
@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}
@keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}
</style>
<body>
<h1> Example </h1>
<h2> Jquery Countdown timer </h2>
<div id = "timer" data-endtime = "31 december 2022 10:00:00 GMT+01:00"> </div>
function myTimer() {
  var ending =  jQuery("#timer").attr("data-endtime"),
      endTime = new Date(ending);
  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 (days < "10") {
    days = "0" + days;
  }
  if (days < "1") {
    days = "0";
  }
  if (hours < "10") {
    hours = "0" + hours;
  }
  if (hours < "1") {
    hours = "0";
  }
  if (minutes < "10") {
    minutes = "0" + minutes;
  }
  if (minutes < "1") {
    minutes = "0";
  }
  if (seconds < "10") {
    seconds = "0" + seconds;
  }
  if (seconds < "1") {
    seconds = "0";
  }
  $("#timer").html(
    "<span id = 'days'>" +
    days +
    "<span> Days </span> </span>" +
    "<span id = 'hours'>" +
    hours +
    "<span> Hrs </span> </span>" +
    "<span id = 'minutes'>" +
    minutes +
    "<span> Mins </span> </span>" +
    "<span id = 'seconds'>" +
    seconds +
    "<span> Secs </span> </span>"
  );
}
setInterval(function() {
  myTimer();
}, 1000);
</script>
</body>
</html>

Explanation:

In the above example, we created a countdown timer using jquery. It counts how many days, minutes and seconds left from given dates.

Output:

Following is the output of this example.

Example 3:

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of  countdown timer using jquery </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jquery.com/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);
body {
  font-family: 'Titillium Web', cursive;
  width: 800px;
  margin: 0 auto;
  text-align: center;
  color: white;
  background: #222;
  font-weight: 100;
}
html {
    padding: 0;
    margin: 0;
        font-family: "Open Sans", Arial, Helvetica;
      -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
h1 {
  position: relative;
  color: #FFF;
  font-weight: 100;
  font-size: 40px;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
}
h2 {
  font-weight: 200;
  font-size: 30px;
  padding: 10;
  margin: 10;
  line-height: 1;
  color: black;
  letter-spacing: 2px;
  text-align: center;
}
.transition10s {
    transition: 10s ease-in-out;
    -moz-transition: 10s ease-in-out;
    -ms-transition: 10s ease-in-out;
    -webkit-transition: 10s ease-in-out;
    -o-transition: 10s ease-in-out;
}
.transition300 {
    transition: 300ms ease-in-out;
    -moz-transition: 300ms ease-in-out;
    -ms-transition: 300ms ease-in-out;
    -webkit-transition: 300ms ease-in-out;
    -o-transition: 300ms ease-in-out;
}
.fLeft {
    float: left;
}
.timerCont { width: 15%; display: inline-block; vertical-align: middle; }
.loader { position: relative; width: 100px; height: 100px; margin: auto; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding: 5px;
 background: #f0f0f0; border-radius: 100px; }
.loader-bg { width: 100%; height: 100%; border-radius: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; background: #fff; box-shadow: 0 0 15px 0 rgba(0,0,0,0.2) }
.spiner-holder-1 { position: absolute; top: 0; left: 0; overflow: hidden; width: 50%; height: 50%; background: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
.spiner-holder-2 { position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%; background: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
.loader-spiner { width: 200%; height: 200%; border-radius: 50%; border: 5px solid #91bf34; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;
.animate-0-25-a { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; }
.animate-0-25-b { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; }
.animate-25-50-a { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%;}
.animate-25-50-b { -webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; }
.animate-50-75-a { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; }
.animate-50-75-b { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; }
.animate-75-100-a { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; }
.animate-75-100-b { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; }
.text { padding-top: 35%; text-align: center; color: #4d4d4d; font-size: 26px; line-height: 20px; }
.border0 { border-color: #e00000; }
.border25 { border-color: #f49712; }
.border50 { border-color: #FFD500; }
.border75 { border-color: #91bf34; }
.timetitle { width: 85%; line-height: 30px; padding: 5px 20px;  display: inline-block; 
vertical-align: middle; }
</style>
<body>
<div class = "timerCont transition300" id = "timer_div">
  <div class = "loader fLeft">
    <div class = "loader-bg">
      <div id = "timer" class = "text fmUbuntuL transition10s"> </div>
    </div>
    <div class = "spiner-holder-1 animate-0-25-a">
      <div class = "spiner-holder-2 animate-0-25-b" style = "transform: rotate(-90deg);">
        <div class = "loader-spiner transition10s border75">
        </div>
      </div>
    </div>
    <div class = "spiner-holder-1 animate-25-50-a">
      <div class = "spiner-holder-2 animate-25-50-b" style = "transform: rotate(-90deg);">
        <div class = "loader-spiner transition10s border75"> </div>
      </div>
    </div>
    <div class = "spiner-holder-1 animate-50-75-a">
      <div class = "spiner-holder-2 animate-50-75-b" style = "transform: rotate(-90deg);">
        <div class = "loader-spiner transition10s border75"> </div>
      </div>
    </div>
    <div class = "spiner-holder-1 animate-75-100-a">
      <div class = "spiner-holder-2 animate-75-100-b" style = "transform: rotate(-90deg);">
        <div class = "loader-spiner transition10s border75"> </div>
      </div>
    </div>
  </div>
</div>
<script>
var time = 300; 
	var originalRotate = -90;
	var cntDwn = 59;
	var rotatePerSec = 360 / time;
	var rotateQuarter = time / 4;
	function myTimer() {
	    console.log('time...' + time + 'cntDwn...' + cntDwn + 'originalRotate...' + originalRotate);
	    if (cntDwn == 0) {
	        cntDwn = 59;
	    } else{
	        cntDwn--;
	        if (cntDwn < 10) {
	            cntDwn = "0" + cntDwn;
	        } }
	    if (time >= 240 && time < 300) {
	            $("#timer").html("04:"+cntDwn);
        } else if (time >= 180 && time < 240) {
            $("#timer").html("03:"+cntDwn);
        } else if (time >= 120 && time < 180) {
            $("#timer").html("02:"+cntDwn);
        } else if (time >= 60 && time < 120) {
            $("#timer").html("01:"+cntDwn);
        } else if (time >= 0 && time < 60) {
        	if (time > 0) {
        		$("#timer").html("00:"+cntDwn);
        	} else {
        		console.log("time is zero");
        		$("#timer").html("00:00");
        	}            
        } else if(time < 0){    	
            $(".animate-75-100-b").css("transform","rotate(0deg)");
        }
	    if (originalRotate <= 0) {
	    	originalRotate = originalRotate + 1.2;
	    } else {
	        originalRotate = -88.8;
	    }
        if (time > 225 && time <= 300) {
        	if (originalRotate <= 0) {
        		$(".animate-0-25-b").css("transform","rotate("+originalRotate+"deg)");
        	} else {
        		$(".animate-0-25-b").css("transform","rotate(0deg)");
        		$(".loader-spiner").removeClass("border75").addClass("border50");
        	}            
        } else if (time > 150 && time <= 225 ) {
        	if (originalRotate <= 0) {
        		$(".animate-25-50-b").css("transform","rotate("+originalRotate+"deg)");
        	} else {
        		$(".animate-25-50-b").css("transform","rotate(0deg)");
        		$(".loader-spiner").removeClass("border50").addClass("border25");
        	}
        } else if (time > 75 && time <= 150 ) {
            if (originalRotate <= 0) {
        		$(".animate-50-75-b").css("transform","rotate("+originalRotate+"deg)");
        	} else {
        		$(".animate-50-75-b").css("transform","rotate(0deg)");
        		$(".loader-spiner").removeClass("border25").addClass("border0");
        	}
        } else if (time > 0 && time <= 75 ) {
        	if (originalRotate <= 0) {
        		$(".animate-75-100-b").css("transform","rotate("+originalRotate+"deg)");
        	} else {
        	
	$(".animate-75-100-b").css("transform","rotate(0deg)");
        	}            
        } else if(time <= 0){
            $(".animate-75-100-b").css("transform","rotate(0deg)");
        }
	    time--;    
	}
	var myVar = setInterval(function(){ 
	    myTimer();
	    if (time < 1) {
	        console.log("Stop");
	        clearInterval(myVar);
	        $(".animate-75-100-b").css("transform","rotate(0deg)");
	        $("#timer").html("00:00");
	    }
	}, 1000);
</script>
</body>
</html>

Explanation:

In the above example, we created a countdown timer using jquery. It counts how many minutes left from given date.

Output:

Following is the output of this example.