<html>
<head>
<title>Een digitale klok</title>
<script language="JavaScript" type="text/javascript">
<!--
//de twee afbeeldingen voor het dubbelpunt
var dp1=new Image(); dp1.src="images/klok/colon.gif";
var dp2=new Image(); dp2.src="images/klok/colon2.gif";
//step wisselt tss 1 en 2 om het dubbelpunt te kunnen laten knipperen
var step=1;
//de afbeeldingen voor elk cijfer inladen
var c1=new Image(); c1.src="images/klok/c1.gif";
var c2=new Image(); c2.src="images/klok/c2.gif";
var c3=new Image(); c3.src="images/klok/c3.gif";
var c4=new Image(); c4.src="images/klok/c4.gif";
var c5=new Image(); c5.src="images/klok/c5.gif";
var c6=new Image(); c6.src="images/klok/c6.gif";
var c7=new Image(); c7.src="images/klok/c7.gif";
var c8=new Image(); c8.src="images/klok/c8.gif";
var c9=new Image(); c9.src="images/klok/c9.gif";
var c0=new Image(); c0.src="images/klok/c0.gif";
//een witruimte met de breedte van de cijfers
var cb=new Image(); cb.src="images/klok/cb.gif";
function afb(h,m){
if (!document.images)
return;
if (h<10) //een witruimte plaatsen als de uren < 10
document.images.a.src=cb.src;
else //10-uren afbeelding plaatsen
document.images.a.src=eval("c"+Math.floor(h/10)+".src");
//de eenheden van de uren plaatsen
document.images.b.src=eval("c"+(h%10)+".src");
if (m<10) //een 0 zetten als min < 10
document.images.d.src=c0.src;
else //10-minuten zetten
document.images.d.src=eval("c"+Math.floor(m/10)+".src");
//de eenheden van de minuten plaatsen
document.images.e.src=eval("c"+(m%10)+".src");
}
function show(){
if (!document.images)
return;
var Digital=new Date(); //de huidige datum ophalen
var uren=Digital.getHours(); //uren opvragen
var minuten=Digital.getMinutes(); //minuten opvragen
afb(uren,minuten); //de juiste afbeeldingen tonen
setTimeout("show()",1000); //dit elke seconde herhalen (als je elke minuut zet,
//maar de pagina wordt bvb op 30s ingeladen, blijf je anders achterlopen)
}
function knipper(){ //het knipperen van het dubbelpunt
if (!document.images)
return;
document.images.dubbelpunt.src=eval("dp"+step+".src");
if (step<2)
step++;
else
step=1;
setTimeout("knipper()",500); //elke halve seconde herhalen
}
//-->
</script>
</head>
<body onLoad="show();knipper()"> <!-- de klok tonen en het knipperen starten zodra de pagine is geladen //-->
<!-- de blanco-afbeeldingen plaatsen; geeft een juiste uitlijning tijdens het inladen van de pagina //-->
<img src="images/klok/cb.gif" name="a"><img src="images/klok/cb.gif" name="b"><img src="images/klok/colon.gif" name="dubbelpunt"><img src="images/klok/cb.gif" name="d"><img src="images/klok/cb.gif" name="e">
</body>
</html>
