Countdown to Zero ~ Tested in IE6.0, Netscape8.1, Opera8.54, Firefox1.5.0.3 and AOL Explorer1.2

T his script initiates a countdown based on the number you enter and ends at zero. Once it hits "Zero", it stops.

We have tested the code in IE6.0, Firefox1.5.0.3, Opera8.54, Netscape8.1 and AOL Explorer1.2. This script worked in IE, Opera8.54, and AOL Explorer1.2. All other platforms tested you will "Not" see the effect. There will be blank space where the effect would be located. It degrades well and you will not get any error messages.

D epending on your knowledge of HTML and java scripts, this is an easy, three (3) part copy and paste code with minimal reconfigurations.

Copy/Cut & Paste the coding into the <HEAD> section of your HTML document.

Add the onLoad event handler directly into the <BODY> tag.

Copy/Cut & paste the coding anywhere into the <BODY> section of your HTML document you want the effect to appear.

<HEAD> Section Reconfigurations

<!-- Begin
<!--
var g_iCount = new Number();

// CHANGE THE COUNTDOWN NUMBER HERE - ADD ONE TO IT //
var g_iCount = 11;

function startCountdown(){

T he above reconfiguration is to set how many seconds to count down from. The reason for the "ADD ONE TO IT", is quite simple. It takes about a second to start the effect so if you want to count down for example from 100 seconds, you would enter 101.

For your Information: If you notice the effect itself, you have three separate sets of numbers 00:00.017. When you reconfigure the number to count down, no matter what number you replace the default with, the first two sets on the left will remain 00:00.017. Even if you use 6, 7, 8 etc. intergers, it will just count down with seconds. It will not add hours days etc. In other words, if you change the default to 123456, the countdown will look something like the below:

00:00.0123456>

Y ou can remove all the unused zero's (0) if you feel you do not want them to appear and just have the seconds count down. This reconfiguration is made within the <HEAD> section of the code. See below on where and howto.

Default With The 00:00.0

// CHANGE THE COUNTDOWN NUMBER HERE - ADD ONE TO IT //
var g_iCount = 11;

function startCountdown(){
if((g_iCount - 1) >= 0){
g_iCount = g_iCount - 1;
numberCountdown.innerText = '00:00.0' + g_iCount;
setTimeout('startCountdown()',1000);
}
}
// End -->

Reconfigured With The 00:00.0 Removed

// CHANGE THE COUNTDOWN NUMBER HERE - ADD ONE TO IT //
var g_iCount = 11;

function startCountdown(){
if((g_iCount - 1) >= 0){
g_iCount = g_iCount - 1;
numberCountdown.innerText = '0' + g_iCount;
setTimeout('startCountdown()',1000);
}
}
// End -->

N otice in the above code the use of the apostrophe '. Be sure not to remove either one when you remove the unwanted zeros or the effect will not work and you will get the infamous little error message in the lower left hand side of your screen saying Done or Done With Error On Page.

I f you need a little refresher on howto add the onload event handler directly into the <BODY> tag, see the below examples:

Default <BODY> Tag ~ No onload event handler

Reconfigured <BODY> Tag ~ onload Event Handler Inserted

T he last part is the one that goes anywhere in the <BODY> section you want the effect to appear. These reconfigurations are that of font face, color and size.

<BODY> Section Reconfigurations

W e hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]