Uncle Jim's Web Designs
JavaScript Examples
Image Clock
Author:
Jim Stiles
This script demonstrates how to use images to produce a live digital clock.
INSTALLATION INSTRUCTIONS
COPY
-
Insert Between Head Tags: <HEAD></HEAD>
<script type="text/javascript"><!-- Another script from Uncle Jim www.jdstiles.com num = new Array("0.gif","1.gif","2.gif","3.gif","4.gif","5.gif","6.gif","7.gif","8.gif","9.gif") function clock() {// Load the digit images every second time = new Date() hours=time.getHours().toString() minutes=time.getMinutes().toString() seconds=time.getSeconds().toString() h1=hours.substring(0,1) h2=hours.substring(1,2) m1=minutes.substring(0,1) m2=minutes.substring(1,2) s1=seconds.substring(0,1) s2=seconds.substring(1,2) if(hours<10){ h2=h1 h1=0 } if(minutes<10){ m2=m1 m1=0 } if(seconds<10){ s2=s1 s1=0 } document.hours1.src = num[h1] document.hours2.src = num[h2] document.min1.src = num[m1] document.min2.src = num[m2] document.sec1.src = num[s1] document.sec2.src = num[s2] timer = setTimeout("clock()",1000) } // add onload="clock()" to the opening BODY tag //--></script>
COPY
-
Insert Inside Body: <BODY></BODY>
<center> <img name="hours1" src="" width="60" height="71"> <img name="hours2" src="" width="60" height="71"> <img name="min1" src="" width="60" height="71"> <img name="min2" src="" width="60" height="71"> <img name="sec1" src="" width="60" height="71"> <img name="sec2" src="" width="60" height="71"> </center>
COPY
-
Insert into Body Tag: <BODY 'CODE HERE'>
onload="clock()"
Close This Window