Javascript count down timer

The following count down will use a javascript function to calculate what content needs to show on the div and using setInterval(CountDown, 1000); to trigger the display per seconds.

1. basic countdown by seconds.

step 1. create a .js file, put the following function and variant.

var maxtime = 35

function CountDown() {
    if (document.getElementById("divCountDown").style.display=='none')
    {
        document.getElementById("divCountDown").style.display = 'block'
    }

    if (maxtime >= 1) {
        seconds = maxtime - 1;
        msg = "Time left:  " + seconds + "  seconds";
        document.getElementById("divCountDown").innerHTML = msg;
        --maxtime;
    }
    else {
        clearInterval(timer);
        alert("time is over");
        document.getElementById("divCountDown").style.display = 'none'
    }
 }

 function triggerCountDown()
{
    timer = setInterval(CountDown, 1000);
}

step 2. hookup the code with a asp button in aspx page.

</pre>
<div id="divCountDown" style="display: none; color: red;"></div>
<pre>

2. hours count down


=0){
 minutes = Math.floor(maxtime/60);
 seconds = Math.floor(maxtime%60);
 msg = "Time left: "+minutes+"  minutes"+seconds+" seconds";
 document.all["timer"].innerHTML=msg;
 if(maxtime == 5*60) alert('there are 5 minutes left');
 --maxtime;
 }
 else{
 clearInterval(timer);
 alert("time is over");
 }
}
timer = setInterval("CountDown()",1000);
//--></pre>
<div id="timer" style="color: red;"></div>
<pre>

3. Fancy countdown

display like the following.

image, 

</pre>
<div id="javascript_countdown_time"></div>
<pre>var javascript_countdown = function () {
	var time_left = 10; //number of seconds for countdown
	var output_element_id = 'javascript_countdown_time';
	var keep_counting = 1;
	var no_time_left_message = 'No time left for JavaScript countdown!';

	function countdown() {
		if(time_left < 2) {
			keep_counting = 0;
		}

		time_left = time_left - 1;
	}

	function add_leading_zero(n) {
		if(n.toString().length < 2) {
			return '0' + n;
		} else {
			return n;
		}
	}

	function format_output() {
		var hours, minutes, seconds;
		seconds = time_left % 60;
		minutes = Math.floor(time_left / 60) % 60;
		hours = Math.floor(time_left / 3600);

		seconds = add_leading_zero( seconds );
		minutes = add_leading_zero( minutes );
		hours = add_leading_zero( hours );

		return hours + ':' + minutes + ':' + seconds;
	}

	function show_time_left() {
		document.getElementById(output_element_id).innerHTML = format_output();//time_left;
	}

	function no_time_left() {
		document.getElementById(output_element_id).innerHTML = no_time_left_message;
	}

	return {
		count: function () {
			countdown();
			show_time_left();
		},
		timer: function () {
			javascript_countdown.count();

			if(keep_counting) {
				setTimeout("javascript_countdown.timer();", 1000);
			} else {
				no_time_left();
			}
		},
		//Kristian Messer requested recalculation of time that is left
		setTimeLeft: function (t) {
			time_left = t;
			if(keep_counting == 0) {
				javascript_countdown.timer();
			}
		},
		init: function (t, element_id) {
			time_left = t;
			output_element_id = element_id;
			javascript_countdown.timer();
		}
	};
}();

//time to countdown in seconds, and element ID
javascript_countdown.init(3673, 'javascript_countdown_time');
Advertisements

3 thoughts on “Javascript count down timer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s