Les horloges les plus courantes se retrouvent dans un objet de type "one-line text box". Ce sont les plus faciles car elles ne nécessitent pas d'images.
Comment cela fonctionne?
Pour afficher l'heure, il faut utiliser la fonction setTimeout( fonction(),
duree);
fonction() est la fonction à utiliser pour afficher l'heure
duree est la durée en millisecondes du chronomètre. Ici, on fait appel toutes les 1000
millisecondes à la fonction "fonction()"
Le code
| <html> <head> <script LANGUAGE="JavaScript"> <!-- //variable qui permet d'identifier le timer afin de pouvoir l'arrêter var timerID = null; var timerActif = false; function stopClock() { if (timerActif) clearTimeout(timerID); timerActif = false; } function startClock() { stopClock(); showtime(); } function showtime() { var now = new Date(); var hour = now.getHours(); var min = now.getMinutes(); var sec = now.getSeconds(); heure = (hour > 9? hour:"0" + hour); heure += ":" + (min > 9? min:"0" + min); heure += ":" + (sec > 9? sec:"0" + sec); document.Clock.Horloge.value = heure; //pour mettre l'horloge dans la barre de status : //window.status = heure; timerID = setTimeout("showtime()",1000); timerActif = true; } //--> </script> </head> <body onLoad="startClock()" onUnLoad="stopClock()"> <form name="Clock"> <center> <p><input type="text" name="Horloge" size="8" style="font-family: Courier New"></p> </center> </form> </body> </html> |
Il est aussi possible d'utiliser des images pour afficher l'heure.
Le code
| <html> <head> <script LANGUAGE="JavaScript"> <!-- //variable qui permet d'identifier le timer afin de pouvoir l'arrêter var timerID = null; var timerActif = false; if(document.images){ chiffre = new Array(10); chiffre[0] = new Image(); chiffre[0].src = "images/r0.gif"; chiffre[1] = new Image(); chiffre[1].src = "images/r1.gif"; chiffre[2] = new Image(); chiffre[2].src = "images/r2.gif"; chiffre[3] = new Image(); chiffre[3].src = "images/r3.gif"; chiffre[4] = new Image(); chiffre[4].src = "images/r4.gif"; chiffre[5] = new Image(); chiffre[5].src = "images/r5.gif"; chiffre[6] = new Image(); chiffre[6].src = "images/r6.gif"; chiffre[7] = new Image(); chiffre[7].src = "images/r7.gif"; chiffre[8] = new Image(); chiffre[8].src = "images/r8.gif"; chiffre[9] = new Image(); chiffre[9].src = "images/r9.gif"; Blanc = new Image(); Blanc.src = "images/rblanc.gif"; } function stopClock() { <body onLoad="startClock()" onUnLoad="stopClock()"> <p align="center"> |
Voici différentes images que vous pouvez utiliser :
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 (blanc) |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
(blanc) |
|
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 (blanc) |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 (blanc) |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
