<HTML>
<HEAD>
<title>REDEUX II Countdown</title>
<script>
showDate = new Date( "November 9, 1997 21:00:00"); Get showtime
showSecs = showDate.getTime();
function getSecs()
{
window.setTimeout( 'getSecs()',1000);
var nowDate = new Date();
var nowSecs = nowDate.getTime();
var diff1000 = showSecs - nowSecs;
var remainSecs = Math.floor( diff1000 / 1000); How many seconds until it starts?
Pick out single digits
var ss = remainSecs % 60;
var sec1 = Math.floor( ss / 10);
var sec2 = ss % 10;
var remain = Math.floor( remainSecs / 60);
var mm = Math.floor( remain % 60);
var min1 = Math.floor( mm / 10);
var min2 = mm % 10;
remain = Math.floor( remain / 60);
var hh = remain % 24;
var hour1 = Math.floor( hh / 10);
var hour2 = hh % 10;
remain = Math.floor( remain / 24);
var day1 = Math.floor( remain / 10);
var day2 = remain % 10;
Update all 8 digits
The eval() expands to one of the digitN vars below
document.images[ "s1"].src = eval( "digit" + sec1 + ".src");
document.images[ "s2"].src = eval( "digit" + sec2 + ".src");
document.images[ "m1"].src = eval( "digit" + min1 + ".src");
document.images[ "m2"].src = eval( "digit" + min2 + ".src");
document.images[ "h1"].src = eval( "digit" + hour1 + ".src");
document.images[ "h2"].src = eval( "digit" + hour2 + ".src");
document.images[ "d1"].src = eval( "digit" + day1 + ".src");
document.images[ "d2"].src = eval( "digit" + day2 + ".src");
}
This loads all images into variables
These are referred to by the eval above
digit0 = new Image(); digit0.src = "0.gif";
digit1 = new Image(); digit1.src = "1.gif";
digit2 = new Image(); digit2.src = "2.gif";
digit3 = new Image(); digit3.src = "3.gif";
digit4 = new Image(); digit4.src = "4.gif";
digit5 = new Image(); digit5.src = "5.gif";
digit6 = new Image(); digit6.src = "6.gif";
digit7 = new Image(); digit7.src = "7.gif";
digit8 = new Image(); digit8.src = "8.gif";
digit9 = new Image(); digit9.src = "9.gif";
</script>
</head>
<body bgcolor="#000000" onLoad="window.setTimeout('getSecs()',1)">
<p>
<p>
<center>
<font color="#00FF00">
<b>
How long until the
<a href="http://www.thex-files.com/upepis.htm#5x03">
<font color=red>100th</font></a>
Episode of the X Files?</b>
</font>
</center>
<p>
<p>
Two rows in the table - one for the digits and one for the "label"
<table border=0 cellspacing=0 cellpadding=0 align=center>
<tr>
Every digit/image slot has a name so that it can be overridden
by a document.images[...] line above.
<td><img src="8.gif" name=d1></td>
<td><img src="8.gif" name=d2></td>
<td><img src="colon.gif"></td>
<td><img src="8.gif" name=h1></td>
<td><img src="8.gif" name=h2></td>
<td><img src="colon.gif"></td>
<td><img src="8.gif" name=m1></td>
<td><img src="8.gif" name=m2></td>
<td><img src="colon.gif"></td>
<td><img src="8.gif" name=s1></td>
<td><img src="8.gif" name=s2></td>
</tr>
<tr>
<td colspan=2><img src="dd.gif"></td>
<td></td>
<td colspan=2><img src="hh.gif"></td>
<td></td>
<td colspan=2><img src="mm.gif"></td>
<td></td>
<td colspan=2><img src="ss.gif"></td>
</tr>
</table>
<p>
<p>
<p>
<center>
<a href="about.html"><font color="#EE0000">about</font></a>
</center>
</font>
</body>
</html>
