Tutoriel

 

Comment créer une horloge dynamique à insérer dans une page web ou dans une courriel.

Note: Ces horloges sont maximisées avec Internet Explorer. Avec d'autres fureteurs, il est possible qu'elles répondent moins bien.


 

 

Marche à suivre :

Pour les besoins de la leçon, nous apprendrons à créer cette horloge.

 Nous aurons besoin d'une image( en jpg ou en gif), d'un fichier .js, d'un fichier .html.
Sauvegardez ces trois éléments dans un même dossier.
Important: Les noms donnés aux fichiers (en rouge) dans cette page, le sont à titre d'exemple. Ils ne correspondent en rien aux fichiers réels. C'est à vous de choisir un nom à donner à vos fichiers.



 

1. Faire une image 100 x 90 pixels avec un logiciel de traitement d'images (ex. Paint Shop Pro, Photo Shop etc...). Ce sera une image toute simple sur un fond coloré. Il n’y a pas de cadre, ni d’écriture. Ceux-ci seront ajoutés dans les codes .js et .html.

Sauvegarder cette image en format .jpg (ou gif) dans un dossier et la nommer (par exemple horloge01)

Conseil: utiliser le même nom pour tous les fichiers. Si vous faites plusieurs horloges, il vous sera ainsi plus facile de vous y retrouver.


horloge01.jpg

 



 

2.Ouvrir un fichier avec Notepad ou un autre traitement de texte:

Écrire cette formule:

document.write

('<iframe border="0" frameborder="no" framespacing="0"

src="horloge01.htm"

scrolling="no" width="120" height="138"></iframe>')

Sauvegarder ce fichier sous :

horloge01.js   (ou horloge02 ou 03…)

Note : Si vous créez une nouvelle horloge, il faudra réécrire ce fichier(horloge01.htm) en changeant son nom .

 

 


 

3. Faire une page web (html) :

a) dans la section "HEAD" copier et coller (copier-coller) ces lignes (en bleu dans l'encadré):
Elles permettent de rendre l’horloge dynamique en y indiquant l’heure et la date.
Note : Dans cette partie, il ne faut rien changer.

<SCRIPT LANGUAGE="JavaScript">

navvers = navigator.appVersion.substring(0,1);
if (navvers > 3)
navok = true;
else
navok = false;
today = new Date;
numero = today.getDate();
if (numero<10)
numero = "0"+numero;
mois = today.getMonth();
if (navok)
annee = today.getFullYear();
else
annee = today.getYear();
mois++;
if (mois < 10)
mois = "0" + mois;
messageDate = numero + "/" + mois + "/" + annee;
function HeureCheck()
{
krucial = new Date;
heure = krucial.getHours();
min = krucial.getMinutes();
sec = krucial.getSeconds();
jour = krucial.getDate();
mois = krucial.getMonth()+1;
annee = krucial.getFullYear();
if (sec < 10)
sec0 = "0";
else
sec0 = "";
if (min < 10)
min0 = "0";
else
min0 = "";
if (heure < 10)
heure0 = "0";
else
heure0 = "";
DinaHeure = heure0 + heure + ":" + min0 + min + ":" + sec0 + sec;
which = DinaHeure
if (document.all){
dynamic3.innerHTML='<center>00:00:00</center>'
dynamic3.innerHTML='<FONT SIZE=1 FACE="Verdana, Arial"><B>'+which+'</B></FONT>';
}
else if (document.layers){
document.dynamic1.document.dynamic2.document.write(''+which+'')
document.dynamic1.document.dynamic2.document.close()
}
tempo = setTimeout("HeureCheck()", 1000)
}

</SCRIPT>

 

 

b) Dans la partie BODY:
Dans cette partie, il faut changer les parties en rouge. Ce sont les couleurs qui s’adapteront à l’image (fond, cadres, police de caractères) .

<body>
<body onLoad="HeureCheck()" onUnload="clearTimeout(tempo)" bgcolor="#C0C0C0">
<table border="6" cellspacing="0" cellpadding="0" width="50" height="50"bordercolorlight="#
B8AC72" bordercolordark="#CEC197">
<!-- couleur fond et texte -->
<tr>
<td bgcolor="#
696b3a" style="border: 1px solid #af5c27; " >
<table summary="" border="0" width="100%" height="100%">
<tr>
<td bgcolor="#
696b3a"><CENTER>
<font color="#
cec197">
<!-- fin couleur fond et texte -->

<!-- police de caractère et image-->
<FONT SIZE=1 FACE="Tahoma"><B><SCRIPT LANGUAGE="JavaScript"> document.write(messageDate); </SCRIPT> </B></FONT>
<img border="0" src="horloge2.jpg" width="100" height="90">
<!-- fin images ici -->

<ilayer id="dynamic1" width=100% height=15><layer id="dynamic2" width=100% height=15><div id="dynamic3"></div></layer></ilayer>
</CENTER>
</td>
</tr>
</table>
</tr>
</table>
</BODY>

Notes:


#C0C0C0 est la couleur du fond de la page, vous pouvez la laisser telle quelle ou mettre le code de couleur désiré.


 #B8AC72 et #CEC197 sont les couleurs du cadre de l’horloge. À changer si désiré.
 


#696b3a et #af5c27
sont les couleurs autour de l’image.
Il a deux tons.
#696b3a  devrait être la même couleur que le fond de votre image (ici en vert)
#af5c27 est une petite ligne autour de l'image pour apporter un contraste. Ici, orange brûlé.
 


#cec197 est la couleur des nombres et des lettres ou polices de caractères.
J'ai choisi la même couleur que le cadre.
 


 

 



 

4. Sur un site web: (à l'endroit où l’on veut que l'horloge apparaisse):

<iframe src="http://legrenierdebibiane.com/horloges/horloge00.htm" width=120 height=138 MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no></iframe>

Note: En rouge, c’est l’url où se trouve la page html. Dans le même dossier (ici "horloges"), se trouvent la page .js, et votre image sur le  serveur :

horloges/horloge01.jpg
horloges/horloge01.js
horloges/horloge01.html

Important: Les trois éléments doivent être placés dans un même dossier. Dans mon cas, ils sont placés dans le dossier «horloges».

 


Si vous souhaitez insérer un lien sur votre horloge, il suffit de cliquer sur l'image et de procéder comme à l'habitude.


Pour créer plusieurs horloges, il faut répéter tout le processus mais, en changeant les noms des fichiers.
Ex. : horloges/horloge02.jpg
horloges/horloge02.js
horloges/horloge02.html
et
horloges/horloge03.jpg
horloges/horloge03.js
horloges/horloge03.html
….

 




Retour à
Le Grenier de Bibiane