Ever find yourself counting down the days until an event? A visit from an out-of-town friend? A trip to Chile? An

upcoming evoltageddon? I know I do this quite often. I used to spend a lot of time staring at the Windows calendar,

counting days. Then I got bored one rainy day...

The easiest way I found to write a countdown script was to break down time into the smallest unit needed. For this

script, seconds will do just fine (it's more fun to watch seconds decrement than it is to watch minutes do the same). If

you want to use milliseconds, well, it's your CPU.

The script involves two parts: one on the server side, and one on the client side (the entire thing could be

client side, but it's much simpler to rely on a single clock than it is to rely on X clocks on client computers). Here's

the basic rundown of what we have to do to create this countdown script:

On the server side...

* If you don't have the modulus operator available to you, you can achieve the same effect by

using multiplication and subtraction. For instance, if you needed to calculate iSecondsLeft modulus 86,400 without using the

modulus operator, you could use: iSecondsLeft - (numberOfDays * 86,400) and you will get the same value.

Now, at this point, you have enough to simply write out the remaining time. However, one second later this value will

be inaccurate. You could refresh the screen every second, but then you're putting unnecessary strain on the server. The

solution involves a balance between server and client. So, we need some scripting on the client:

On the client-side...

That's the basics. Below is an example implementation of the above idea. It is written in ASP and client-side


<%@EnableSessionState = False%>


Response.Expires = 0

currentTime = Now()

destinationTime = CDate("8/15/2003 14:00:00")

iTotalSeconds = DateDiff("s", currentTime, destinationTime)

iSecondsLeft = iTotalSeconds

days = Fix(iSecondsLeft / (60 * 60 * 24))

iSecondsLeft = iSecondsLeft mod (60 * 60 * 24)

hours = Fix(iSecondsLeft/(60 * 60))

iSecondsLeft = iSecondsLeft mod (60 * 60)

minutes = Fix(iSecondsLeft / (60))

iSecondsLeft = iSecondsLeft mod 60

seconds = iSecondsLeft



Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<script language="JavaScript" type="text/javascript">

<!-- hide from older browsers

iterations = 0;

function decrement()


if (iterations > 300)


window.location = '<%Response.Write Request.ServerVariables("SCRIPT_NAME")%>';


sec = (document.fooform.sec.value)-0;

min = (document.fooform.min.value)-0;

hrs = (document.fooform.hrs.value)-0;

day = (document.fooform.day.value)-0;

// check first to see if there is any time left at all

// this is done by adding the time units and testing

// its value

if ((sec+min+hrs+day) > 0)


if (sec > 0)

document.fooform.sec.value = (sec-1);



if (min > 0 )

document.fooform.min.value = min-1;



if (hrs > 0)

document.fooform.hrs.value = hrs-1;



if (day > 0)

document.fooform.day.value = day-1;


document.fooform.day.value = 0;

document.fooform.hrs.value = 23


document.fooform.min.value = 59


document.fooform.sec.value = 59;


setTimeout("decrement();", 1000);




document.fooform.sec.style.color = "#cc0000";

document.fooform.min.style.color = "#cc0000";

document.fooform.hrs.style.color = "#cc0000";

document.fooform.day.style.color = "#cc0000";

alert("Evolt has taken over the world!");




// -->


<style type="text/css">


font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 13px;

width: 28px;

border: none;

text-align: right;

background-color: #3399ff;

color: #003399;

font-weight: bold;



font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 13px;

background-color: #3399ff;

color: #003399;


P {

width: 600px;

text-align: center;



<title>Evolt's World Domination Timeline</title>


<body onLoad="decrement();">

<form name="fooform" id="fooform" action="<%Response.Write


<p><a href="http://evolt.org/"><img

src="/evolt/evolt_logo.gif" border="0" alt="Evolt.org

logo" longdesc="http://evolt.org/evolt_images"></a></p>

<p style="padding-top: 30px;">Assuming no one <a

href="http://www.cia.gov/" target="_new">important</a> gets tipped off, Evolt's world

domination plan will have been executed in


Response.Write _

"<input type=""text"" name=""day"" value=""" & days &

"""> days, " _

& "<input type=""text"" name=""hrs"" value=""" & hours &

"""> hours, " _

& "<input type=""text"" name=""min"" value=""" & minutes

& """> minutes, and " _

& "<input type=""text"" name=""sec"" value=""" & seconds

& """> seconds."




A note to those important people: <strong>I'm just kidding</strong>.