Countdown TimerApril 4, 2011

Countdown to Zero

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.

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.

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.

Copy

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

Copy

<script>
var start_repeating_countdown = function(n) {

	// Function to execute when countdown is done.
	var ondone_countdown = function() {
		document.getElementById('countdown_display').innerHTML = '<img src="images/star_red.gif"><img src="images/star_red.gif"><img src="images/star_red.gif">';
		setTimeout(function(){do_countdown(n)},5000);	// repeat
	};

	// Setup up countdown.
	var do_countdown = function(n) {
		(window.counter = new Countdown(	// Expose object as global variable for toggle on/off button
			'countdown_display',		// ID of DOM element used for counter display
			ondone_countdown,		// Function called when done
			{				// Optional options map
			prefix: ' (',			// Prefix added to counter display
			suffix: ' seconds)',		// Suffix added to counter display
			}
		)).start(n);
	};

	// Begin the countdown.
	do_countdown(n);
};
</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.

Copy

<script>
var start_custom_countdown = function(n) {

	// Function to display the countdown value.
	var display_stars = function(n) {
		var html = '', i;
		for (i=0; i<n; i++) {
			html += '<img src="images/star_red.gif">';
		}
		document.getElementById('countdown_custom_display').innerHTML = html;
	};

	// Function to execute when countdown is done.
	var ondone_countdown = function(){
		document.getElementById('countdown_custom_display').innerHTML = '<button onclick="start_custom_countdown('+n+')">Repeat</button>';
		
	}

	// Set up countdown.
	var counter = new Countdown(
		display_stars,			// Function called to display counter
		ondone_countdown,		// Function called when done
		{				// Optional options map
		frequency: 250,			// number of milliseconds between each count
		}
	);

	// Begin the countdown.
	counter.start(n);
};
</script>