Countdown Timer Basics

There are two main tasks involved in making a countdown timer:

• Starting a timer and handling the event
• Updating the page dynamically

Setting the Timer

As a quick search on the Internet will tell you, you request a timer in JavaScript with the setTimeout function. Specifically, this is the window.setTimeout method.[1]

The function takes two parameters: the JavaScript to execute when the timer fires and the number of milliseconds to wait until it does. A basic timer and handler is shown below:

setTimeout ("HandleTimeout()", 1000);

function HandleTimeout ()
{
  // Perform some work
  setTimeout ("HandleTimeout()", 1000);
}

Note that JavaScript only fires the timer once. If you want to fire again, you have to trigger the same timer from the event handler. Let’s move on to updating the page dynamically from the function and see some results.

Updating the Page

In order to update the page, you need to identify the element in the page that will be updated and then dynamically change the content for that element. We will be using the DOM model that all modern browsers provide for access to page elements.[2]

Elements in the DOM are identified by unique ids — an id is attached to an HTML tag like this:

<div id="countdown"></div>

This element can now be accessed using the DOM API function getElementById() on the global document object.

CountDownElement = document.getElementById ("countdown");

CountDownElement is an HTML DOM element which has many properties, one of which is innerHTML. Do not be alarmed that the W3C has deprecated this API (it was introduced by Internet Explorer); it is supported by Opera, Firefox and IE and Safari and can be considered stable.[3]

CountDownElement.innerHTML = "My Value";

First Version of a Timer

Shown below is a timer that counts down from 10 in 10 seconds. Since this is JavaScript, the script fails silently if the CountDownElement is not assigned (i.e. there is no HTML tag with an id equal to countdown). More precisely, it simply assigns the property innerHTML on a generic global object, CountDownElement, which has no effect on the HTML page itself.

var StartValue = 10;

setTimeout ("HandleTimeout()", 1000);

function HandleTimeout ()
{
  var CountDownElement = 
    document.getElementById ("countdown");
  StartValue–;
  CountDownElement.innerHTML = StartValue;
  setTimeout ("HandleTimeout()", 1000);
}

Go to the Countdown Timer Example to see it in action!

Making it Object-oriented

If you’re used to working with objects, you probably don’t like the idea of littering your namespace with a global counter and global functions. The version above is also limited to a single counter per page. Let’s see if we can’t wrap the code above into a class. See Countdown Timer Object for an object-oriented version.