Ultra Lightweight Javascript Countdown Timer

Posted 5:11 pm by muni & 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 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);

If 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>

.