Le script à utiliser est composé de 2 parties.

la plus simple est celle qui permet le démarrage du compteur.

Il s'agit d'ajouter l'option "onload" au tag "body" qui doit normalement se trouver au début du contenu visible de votre page.

Pour un affichage dynamique :
<body onload="KW_doClock()">

Pour un affichage statique (uniquement la date et l'heure à laquelle la page est affichée) :
<body onload="KW_doClock(1)">

Ensuite, recopier le texte ci-dessous exactement à l'endroit ou vous souhaitez afficher l'heure en temps réel:

<script language="JavaScript">
// Copyright 2003 by Kaosweaver, All rights reserved - Traduction Française par Pages-Web.com
var fonte="Arial, Helvetica, sans-serif";taille="10";couleur="#808080";largeur="300";ampm=0;affichedate=1;jsemaine="W2";mois="M1";annee="Y0";
//
function KW_doClock(a) { d=document;t=new Date();p="";dClock=""; if (d.layers) d.wrapClock.visibility="show";tD=(t.getTimezoneOffset()-(clock.z*60))*clock.g;t.setMinutes(tD+t.getMinutes());h=t.getHours();m=t.getMinutes();s=t.getSeconds();if (clock.h) {p=(h>11)?"PM":"AM";h=(h>12)?h-12:h;h=(h==0)?12:h;}if (clock.d) {m=(m<=9)?"0"+m:m; s=(s<=9)?"0"+s:s;} dClock = clock.o+h+':'+m+':'+s+' '+p;if (a) {d.write(dClock);}if (d.layers) {wc = document.wrapClock;lc = wc.document.activeClock;lc.document.write(dClock);lc.document.close();} else if (d.all) { activeClock.innerHTML = dClock;} else if (d.getElementById) {d.getElementById("activeClock").innerHTML = dClock;}if (!a) setTimeout("KW_doClock()",1000);}
function class_clock(f,s,c,b,w,h,d,m,g,z) { this.b=b;this.w=w;this.h=h;this.d=d;this.g=g;this.z=z;this.o='<font style="color:'+c+'; font-family:'+f+'; font-size:'+s+'pt;">';if (m==1) this.o+=doDate(jsemaine," ","D1"," ",mois," ",annee," \&nbsp;- \&nbsp;");}var clock=new class_clock(fonte,taille,couleur,"#000000",largeur,ampm,1,affichedate,0,0); d=document;if (d.all || d.getElementById) {d.write('<span id="activeClock" style="width:'+clock.w+'px; "></span>'); } else if (d.layers) {d.write('<ilayer id="wrapxClock"><layer width="'+clock.w+'";id="activeClock"></layer></ilayer>'); }else {KW_doClock(1);}
function doDate(){ var t=new Date(),a=doDate.arguments,str="",i,a1,lang="1";var month=new Array('Janvier','Jan', 'F&eacute;vrier','F&eacute;v', 'Mars','Mar', 'Avril','Avr', 'Mai','Mai', 'Juin','Jun', 'Juillet','Jui', 'Ao&ucirc;t','Aou', 'Septembre','Sep', 'Octobre','Oct', 'Novembre','Nov', 'D&eacute;cembre','Dec');var tday= new Array('Dimanche','Dim','Lundi','Lun', 'Mardi','Mar', 'Mercredi','Mer','Jeudi','Jeu','Vendredi','Ven','Samedi','Sam');for(i=0;i<a.length;i++) {a1=a[i].charAt(1);switch (a[i].charAt(0)) {case "M":if ( (Number(a1)==3) && ( (t.getMonth()+1)<10) ) str+="0";str+=(Number(a1)>1)?t.getMonth()+1:month[t.getMonth()*2+Number(a1)];break;case "D": if ( (Number(a1)==1) && (t.getDate()<10) ) str+="0";str+=t.getDate();break;case "Y": str+=(a1=='0')?t.getFullYear():t.getFullYear().toString().substring(2);break;case "W":str+=tday[-2+t.getDay()*2+Number(a1)];break; default: str+=unescape(a[i]);}}return str;}
</script>

Les paramètres suivants peuvent être ajustés en les changeant dans le contenu du script:

  • fonte="Arial, Helvetica, sans-serif"
  • taille="8"
  • couleur="#808080"
  • largeur="300" (largeur de la zone d'affichage)
  • ampm=0 (0 = temps sur 24H, 1 = temps sur 12H)
  • affichedate=1 (0 = pas de date, 1 =avec date)
  • jsemaine="W2" (W2 = jour complet, W3 = abrégé ou vide)
  • mois="M1" (M0 = mois complet, M1 = abrégé ou vide)
  • annee="Y0" (Y0 = année sur 4 chiffres, Y1 = 2 chiffres ou vide)

Environ 3% des visiteurs désactivent Javascript. Ces visiteurs ne verront pas l'horloge, mais l'affichage de la page se fera normalement.

Si vous voulez afficher un message en remplacement de l'horloge pour ces visiteurs, ajoutez juste après la fin du script la ligne suivante un insérant le texte de votre choix (ou code HTML, sans restrictions):

<noscript>Bonjour</noscript>

Programme Copyright 2003 by Kaosweaver, All rights reserved - Traduction Française par Pages-Web.com