Horloge selon les fuseaux horaires

Ayant eu quelques difficultées à touver mon bonheur en matière d’horloge javascript, je vous propose ici le code a ajouter dans votre page. Le principe est de récupérer le fuseau horaire du visiteur, de recaler cette heure par rapport à Greenwich (GMT), puis d’effectuer le décalage entre Greenwich et la zone de l’endroit dont on souhaite avoir l’heure. En l’occurence pour moi Chicago (GMT -5) et Lyon (GMT +1).

Avec une petite particularité si vous voulez afficher une horloge pour la France, il faut tenir compte du passage à l’heure d’été/d’hiver.

Tic Tac

Le seul inconvénient de ce script, et c’est bien là son moindre défaut, est qu’il utilise l’heure du visiteur et donc, cette dernière se doit d’être correctement réglée…

Ainsi voici, le code:

Code à placer dans la balise head de votre page (entre <head> et </head>):

<script language=”JavaScript”>
<!–
//PLF-http://www.jejavascript.net/
//modified by GouZi http://gouziatiit.free.fr

function heure() {
//Horloge a l’heure de Paris
var dd;
var Maintenant = new Date();
var fuseau = Maintenant.getTimezoneOffset();
var heures = Maintenant.getHours();
var minutes = Maintenant.getMinutes();
var secondes = Maintenant.getSeconds();
//Décalage par rapport à Greenwich (GMT) – +1 pour Paris
heures = heures + (fuseau/60)+1;
//heure été
var annee = Maintenant.getFullYear();
for (i=31; i >24; i–) {
dimanche = new Date(annee, 2, i);
if (dimanche.getDay()==0) break;
}
for (i=31; i >24; i–) {
dimanche2 = new Date(annee, 9, i);
if (dimanche2.getDay()==0) break;
}
if (Maintenant >= dimanche && Maintenant < dimanche2) heures = heures + 1;
//heure été
// quelques corrections pour retablir des heures inferieures a 0H et superieures a 23H
if ( heures < 0 ) {
heures = 24 + heures;
}
if (heures > 23) {
heures = heures – 24;
}
heures = ((heures < 10) ? ” 0″ : ” “) + heures;
minutes = ((minutes < 10) ? “:0” : “:”) + minutes;
secondes = ((secondes < 10) ? “:0” : “:”) + secondes;
// formhorloge_Paris: nom du formulaire pour l’horloge a l’heure de Paris
// horloge: nom de l’input, où sera affiché l’horloge
document.formhorloge_Paris.horloge.value = heures + minutes + secondes;

//Horloge de Chicago
//de meme sauf qu’on a pas besoin de l’heure d’été
var Maintenant2 = new Date();
var fuseau2 = Maintenant2.getTimezoneOffset();
var heures2 = Maintenant2.getHours();
var minutes2 = Maintenant2.getMinutes();
var secondes2 = Maintenant2.getSeconds();
//Décalage par rapport à Greenwich (GMT) -5 pour Chicago
heures2 = heures2 + (fuseau2/60)-5;
// quelques corrections pour retablir des heures inferieures a 0H et superieures a 23H
if ( heures2 < 0 ) {
heures2 = 24 + heures2;
}
if (heures2 > 23) {
heures2 = heures2 – 24;
}
heures2 = ((heures2 < 10) ? ” 0″ : ” “) + heures2;
minutes2 = ((minutes2 < 10) ? “:0” : “:”) + minutes2;
secondes2 = ((secondes2 < 10) ? “:0” : “:”) + secondes2;
document.formhorloge_Chicago.horloge.value = heures2 + minutes2 + secondes2;
dd=setTimeout(“heure()”,1000);
}
//–>
</script>

Code &agrave placer &agrave l’intérieur de la balise body:

onload=”heure()” onUnload=”clearTimeout(dd)”

Exemple:

<body onload=”heure()” onUnload=”clearTimeout(dd)”>

Code à placer dans la balise body de votre page (entre <body> et </body>):

Pour l’horloge à l’heure de Paris:

<table>
<form name=”formhorloge_Paris” onSubmit=”0″>
<tr>
<td width=”30%”><p>Lyon: </p></td>
<td width=”70%”><input type=”text” name=”horloge” value=”” /></td>
</tr>
</form>
</table>

Pour l’horloge à l’heure de Chicago:

<table>
<form name=”formhorloge_Chicago” onSubmit=”0″>
<tr>
<td width=”30%”><p>Chicago: </p></td>
<td width=”70%”><input type=”text” name=”horloge” value=”” /></td>
</tr>
</form>
</table>

Pour connaître le décalage horaire avec presque toutes les villes dans le monde, demandez &agrave l’horloge parlante !