Ultra Lightweight Javascript Countdown Timer

Posted by & filed under JAVASCRIPT, JQUERY.

This javascript countdown timer or jQuery countdown timer is very very simple and very light in weight.

I had written this Javascript countdown timer for my PHP Quiz Application Using jQuery, Ajax, MySQL and Bootstrap , it’s just five to six lines javascript or jquery code.

 

Javascript Countdown Timer

Javascript Countdown Timer FlowChart:

I am using two functions to make this Javascript Timer countDown.

1. One is our own user defined function countDownTimer() function.
2. Second one is Javascript default setTimeout() function.

setTimeOut():

This Javascript setTimeOut() function will call a function or popup alert box, after given a specific time in milliseconds.

For example If I want to alert my name (muni), after 2 seconds of page load. Set a setTimeout() like this.

setTimeout(function(){ alert('muni') }, 1000*2);

Javascript Countdown Timer FlowchartIf I want to want finish/submit Quiz test after 60 seconds automatically, set a countDownTime = 60. While Quiz starts that countDownTimer() function is called, then countDownTime is minused by one. This minused countDownTime is converted into hour:minute:seconds format using following script.

var hours = parseInt( countDownTime / 3600 ) % 24;
var minutes = parseInt( countDownTime / 60 ) % 60;
var seconds = countDownTime % 60;
var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);

This hour:minute:seconds converted format is assigned to html element to show visually. Then setTimeout() is called, where we assigned to call countDownTimer() function after one seconds. So this setTimeout() calls countDownTimer() function, then countDownTimer() function calls setTimeout() iteratively until countDownTime reaches zero.

 

I had made tutorial on this Javascript countdown timer. please refer following tutorial.

Ultra Lightweight Javascript Countdown Timer

Javascript Countdown Timer Script:

Create span tag within <h2> tag to hold timer countdown.

<h2 style="font-weight: bold;font-size: 5em;">Timer:  <span id="timer"></span></h2>

 

 

This is Javascript countdown timer script.

<script>
	var countDownTime = 60;
	function countDownTimer() {
		var hours = parseInt( countDownTime / 3600 ) % 24;
		var minutes = parseInt( countDownTime / 60 ) % 60;
		var seconds = countDownTime % 60;
		var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);
		document.getElementById("timer").innerHTML = result;
   		if(countDownTime == 0 ){ countDownTime = 60*60*60; }
   		countDownTime = countDownTime - 1;
   		setTimeout(function(){ countDownTimer() }, 1000);
	}
	countDownTimer();
</script>

jQuery Countdown Timer Script:

This is jQuery countdown timer script.

<script>
	var countDownTime = 60;
	function countDownTimer() {
		var hours = parseInt( countDownTime / 3600 ) % 24;
		var minutes = parseInt( countDownTime / 60 ) % 60;
		var seconds = countDownTime % 60;
		var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);
		$('#timer').html(result);
   		if(countDownTime == 0 ){ countDownTime = 60*60*60; }
   		countDownTime = countDownTime - 1;
   		setTimeout(function(){ countDownTimer() }, 1000);
	}
	countDownTimer();
</script>

.

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni2explore[at]gmail.com

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

%d bloggers like this:

Get Instant Script Download Access!