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.

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:

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>