digital clock
Clocks are everywhere, and so they should be in your web page. You can make them as prominent or discreet as your taste allows. In this example, we’re displaying 10 images as the digits of the clock. Each digit is a unique image that is preloaded into an array. We then display the images in increments of a second, minute, or hour.
<html>
<head>
<script type="text/javascript">
function getDigits() {
num=new Array("0.gif","1.gif","2.gif","3.gif","4.gif","5.gif","6.gif","7.gif","8.gif","9.gif");
time=new Date();
hour=time.getHours()
if (hour<10) {
document.getElementById('hour1').src=num[0];
h2="'" + hour + "'";
h2=h2.charAt(1);
document.getElementById('hour2').src=num[h2];
} else {
h1="'" + hour + "'";
h1=h1.charAt(1);
document.getElementById('hour1').src=num[h1];
h2="'" + hour + "'";
h2=h2.charAt(2);
document.getElementById('hour2').src=num[h2];
}
minute=time.getMinutes();
if (minute<10) {
document.getElementById('minute1').src=num[0];
m2="'" + minute + "'";
m2=m2.charAt(1);
document.getElementById('minute2').src=num[m2];
} else {
m1="'" + minute + "'";
m1=m1.charAt(1);
document.getElementById('minute1').src=num[m1];
m2="'" + minute + "'";
m2=m2.charAt(2);
document.getElementById('minute2').src=num[m2];
}
second=time.getSeconds();
if (second<10) {
document.getElementById('second1').src=num[0];
s2="'" + second + "'";
s2=s2.charAt(1);
document.getElementById('second2').src=num[s2];
} else {
s1="'" + second + "'";
s1=s1.charAt(1);
document.getElementById('second1').src=num[s1];
s2="'" + second + "'";
s2=s2.charAt(2);
document.getElementById('second2').src=num[s2];
}
}
function showTime() {
timer=setTimeout("getDigits()",10);
interval=setInterval("getDigits()",1000);
}
function stopInterval() {
clearTimeout(timer);
clearInterval(interval);
}
</script>
</head>
<body onload="showTime()" onunload="stopInterval()" bgcolor="#000000">
<img id="hour1" />
<img id="hour2" />
<img id="minute1" />
<img id="minute2" />
<img id="second1" />
<img id="second2" />
</body>
</html>
It looks a little more complicated than it actually is. The images are placed in an array. The date is read using the getSeconds(), getMinutes() and getHours() methods. We then simply increment those values according to the seconds, minutes and hours we state in increments of milliseconds. For each increment in milliseconds, the appropriate image is displayed from the array we preloaded.
|
