DIGITAL CLOCK WITH IMAGES

       

Here is a clock that updates itself to the second taking the computer's time.
From the code that we all have seen so many times to make a clock in a form input like this one,

we take the parameters in order to tell the computer which picture has to show each time in the different places.
BTW, if you compare both clocks you will see how sinchronized they are. ¡there is no delay in the one that uses the images!
Well, this happends because all the images are preloaded at the browser's cache, even before they are used. Once they are in cache, the script will take them from there and not from the Internet.

All you have to do is Cut & Paste the following code and place it in a specific place in your web page.

First of all, place this code between the <head> </head> tags. This code will preload the images in cache:

<script>
<!-- Preload Images in Cache
image01= new Image(18,18)
image01.src="1.gif"
image02= new Image(18,18)
image02.src="2.gif"
image03= new Image(18,18)
image03.src="3.gif"
image04= new Image(18,18)
image04.src="4.gif"
image05= new Image(18,18)
image05.src="5.gif"
image06= new Image(18,18)
image06.src="6.gif"
image07= new Image(18,18)
image07.src="7.gif"
image08= new Image(18,18)
image08.src="8.gif"
image09= new Image(18,18)
image09.src="9.gif"
image10= new Image(18,18)
image10.src="0.gif"
//-->
</script>

------------------- End of the Preloading Code --------------------

Then, right after the <BODY> tag, you must place the following code. It takes variables so that they can be again take away from there. Very important, but don't ask me why use it. I couldn't make it work without this, and it doesn'n show anywhere in the Web Page:

<form name="prov">
<input type=hidden name="p1">
<input type=hidden name="p2">
<input type=hidden name="p3">
</form>

------------------- End of this Code --------------------

Now, the code for the Images. With the following code they will be placed in a table so they appear like they do on this Web Page:

<table border="0" cellpadding="3" cellspacing="0" bgcolor="white"><tr>
<td> </td>
<td><img name="primero" src="0.gif"><img name="segundo" src="0.gif"></td>
<td> </td>
<td><img name="tercero" src="0.gif"><img name="cuarto" src="0.gif"></td>
<td> </td>
<td><img name="quinto" src="0.gif"><img name="sexto" src="0.gif"></td>
<td> </td>
</tr></table>

------------------- End of the Images Code --------------------

And here is the SCRIPT that takes the computer's time and models it so that it changes to a Clock with Images.
It is very important to place this code after the small form we created before, and after the images as well:

<script>
<!--
// Script made by Jesus Rodriguez Serra, jrs.es@mx3.redestb.es
function reloj() {
var Digital=new Date()
var hora=Digital.getHours()
var minutos=Digital.getMinutes()
var segundos=Digital.getSeconds()
var dn="AM"
if (hora>12) {
dn="PM"
hora=hora-12
}
if (hora==0) {
hora=12
}
if (minutos<=9) {
minutos="0"+minutos
}
if (segundos<=9) {
segundos="0"+segundos
}
if (hora<10) {
hora="0"+hora
}


document.prov.p1.value=hora
document.prov.p2.value=minutos
document.prov.p3.value=segundos

var pp1=document.prov.p1.value
var pp2=document.prov.p2.value
var pp3=document.prov.p3.value

var h1=pp1.substring(0,1)
var h2=pp1.substring(1,2)
var m1=pp2.substring(0,1)
var m2=pp2.substring(1,2)
var s1=pp3.substring(0,1)
var s2=pp3.substring(1,2)
document.images["primero"].src=h1+".gif"
document.images["segundo"].src=h2+".gif"
document.images["tercero"].src=m1+".gif"
document.images["cuarto"].src=m2+".gif"
document.images["quinto"].src=s1+".gif"
document.images["sexto"].src=s2+".gif"

setTimeout("reloj()",1000)
}
//-->
</script>

------------------- End of the Script --------------------

You can use any .gif's you want as long as you call them 0.gif, 1. gif, etc.
But if you want to use my numbers, download them here.

And don't forget to start the clock's function inside the <BODY> tag like this: <BODY onLoad="reloj()">

For any questions or if you detect a bug, please email me at jrs.es@mx3.redestb.es



Script made by Jesus Rodriguez Serra, Spain. 13/03/98