Home

Countdown TimerMack Pexton

Introduction

The countdown.start() function simply counts down from a given number. You can specify a function to execute when reaching 0 or you can specify a URL to redirect to. You can also stop and resume the counter.

This script came about as a way to provide the user a count down before redirecting to another page. I use it on my 404 error pages.

Demo

Below is a simple 10 second countdown to 0. Stars are shown when countdown is complete. This example also repeats the countdown after a while.

count down:

The following demo uses a custom display function to show a countdown of stars instead of simply showing a number. The count down frequency was changed to be faster than one second ticks.

count down:

Script

<script>
/**
 * Countdown from a given number.
 *
 * Usage:
 * 	var c = new Countdown(display,ondone,options);
 * 	c.start(10);
 * 	if (c.isRunning()) c.stop();
 * 	c.resume();
 *
 * Parameters:
 * 	display -- function to execute to display the count
 * 	        or DOM element ID where count is to appear
 *	        or DOM element
 * 	ondone -- function to execute when countdown reaches 0
 *	       or URL to redirect the browser when countdown is done
 * 	options -- optional options map
 *
 * Version 2.1
 * Copyright 2006,2010,  Mack Pexton, mackpexton.com
 * License http://www.opensource.org/licenses/mit-license.php
 */
(function(){
	var default_options = {
		prefix: '',		// prefix added to counter display
		suffix: '',		// suffix added to counter display
		frequency: 1000,	// 1 second in milliseconds
	};

	var countdown = function(display,ondone,options) {
		if (typeof display == 'function') { this.display = display; }
		else { this.el = (typeof display == 'string') ? document.getElementById(display) : display; }

		this.ondone = ondone;

		this.options = {};
		for (var p in default_options) { this.options[p] = default_options[p]; }
		if (options) { for (var p in options) { this.options[p] = options[p]; } }

		this.counter = 10;	// arbitrary default for safety
	}

	countdown.prototype = {
		start: function(n) {
			if (this.timerID) this.stop();
			if (n) this.counter = parseInt(n);
			var obj = this;
			var timer = function() {
				if (obj.display) obj.display(obj.counter);
				if (obj.el) obj.el.innerHTML = (obj.options.prefix ? obj.options.prefix : '') + obj.counter + (obj.options.suffix ? obj.options.suffix : '');
				if (obj.counter <= 0) {
					obj.timerID = null;
					if (typeof obj.ondone == 'function') obj.ondone(obj.el);
					if (typeof obj.ondone == 'string') window.location.href = obj.ondone;
					return;
				}
				obj.timerID = setTimeout(arguments.callee,obj.options.frequency);
				obj.counter -= 1;
			}
			timer();	// start countdown
		},
		stop: function() { if (this.timerID) { clearTimeout(this.timerID); this.timerID = null; } },
		resume: function() { this.start(); },
		isRunning: function() { return !!this.timerID; },
	};

	// Expose 
	window.Countdown = countdown;
})();
</script>

Minified Script

The following is the above script minified using the YUI Compressor 2.4.4 made available at http://refresh-sf.com/yui/. It reduces the script size to be only 981 characters.

<script>
(function(){var b={prefix:"",suffix:"",frequency:1000,};var a=function(f,c,d){if(typeof f=="function"){this.display=f}else{this.el=(typeof f=="string")?document.getElementById(f):f}this.ondone=c;this.options={};for(var e in b){this.options[e]=b[e]}if(d){for(var e in d){this.options[e]=d[e]}}this.counter=10};a.prototype={start:function(e){if(this.timerID){this.stop()}if(e){this.counter=parseInt(e)}var c=this;var d=function(){if(c.display){c.display(c.counter)}if(c.el){c.el.innerHTML=(c.options.prefix?c.options.prefix:"")+c.counter+(c.options.suffix?c.options.suffix:"")}if(c.counter<=0){c.timerID=null;if(typeof c.ondone=="function"){c.ondone(c.el)}if(typeof c.ondone=="string"){window.location.href=c.ondone}return}c.timerID=setTimeout(arguments.callee,c.options.frequency);c.counter-=1};d()},stop:function(){if(this.timerID){clearTimeout(this.timerID);this.timerID=null}},resume:function(){this.start()},isRunning:function(){return !!this.timerID},};window.Countdown=a})();
</script>

Examples

Example 1

The following is the simplest of countdowns. It counts down from 7 displaying the count in the element with the ID "countdown_display" and then redirects to the home page when done.

<script>(new Countdown('countdown_display','/')).start(7);</script>

Example 2

The following example shows the script used for the first demo above. It counts down from 10 and when done it shows 3 starts waiting a few seconds before repeating the countdown.

<script></script>

Example 3

The following example uses a custom function to display the current count. A custom function is also used to display a button to repeat the countdown when done. This script runs the second demo above.

<script></script>