js_count.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<title>JavaScript Graphical Time Counter</title>
<link rel="stylesheet" href="../../default.css" type="text/css">
</head>
<body onLoad="UpdateTime();">

<h1>JavaScript Graphical Time Counter</h1>

<script type="text/JavaScript">
<!--
var secs = 0;
var runs = 1;

function StartTime() {
    // important: do not start another Update()
    // if the timer is already running
    // or it will run too fast
    if (runs==0) {
        runs=1;
        UpdateTime();
    }
}
  
function ResetTime() {
    secs=0;
    UpdateDisplay();
}
  
function UpdateTime() {
    UpdateDisplay();
    secs++;
    if (secs>9999) secs=0;
    if (runs==0) return; // don;t schedule next run if stopped
    setTimeout("UpdateTime();", 1000);
}

function UpdateDisplay() {
    d=secs%10;
    c=Math.floor(secs/10)%10;
    b=Math.floor(secs/100)%10;
    a=Math.floor(secs/1000)%10;
    document.four.src="a"+d+".gif";
    document.three.src="a"+c+".gif";
    document.two.src="a"+b+".gif";
    document.one.src="a"+a+".gif";
}

//-->
</script>

<style type="text/css">
img.dig30 { width: 34px; height: 38px; border: solid 3px #0000FF; }
</style>
<img src="a0.gif" class="dig30" name="one" />
<img src="a0.gif" class="dig30" name="two" />
<img src="a0.gif" class="dig30" name="three" />
<img src="a0.gif" class="dig30" name="four" />
<form>
<input type="button" value="Start" onClick="StartTime();" />
<input type="button" value="Stop"  onClick="runs=0;" />
<input type="button" value="Reset" onClick="ResetTime();" />
</form>

</body>

</html>