SELFHTML: HTML dynamique / Solutions pour la pratique / Affichage de la date et de l'heure

SELFHTML/Quickbar HTML dynamique Solutions pour la pratique

	Affichage de la date et de l'heure
	Affichage de la date et de l'heure - l'exemple

Affichage de la date et de l'heure - l'exemple

Exemple d'affichage: aperçu

Cet exemple montre comment vous pouvez réaliser une montre qui fonctionne et que vous pouvez formater à souhait, de façon à ce qu'elle soit affichée aussi bien sur l'Explorer Internet MS à partir de la version 4.0 qu'avec Netscape également à partir de la version 4.0.

Remarque: Pour une meilleure orientation, l'exemple contient des liens aux explications correspondantes, par exemple: 1*. Ces liens ne font pas partie du code source. Dans le cas où vous copiez l'exemple dans un éditeur, vous devez effacer ces liens faute de quoi vous auriez des messages d'erreur JavaScript.

Exemple:

<html>
<head>
<style type="text/css">
.heure { font-family:Century Gothic,Arial; font-size:36pt; color:blue; }
</style>
2* <script language="JavaScript">
<!--
 joursemaine =
 new Array("dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi");
function afficheheure()
{
 var maintenant = new Date();
 var jour = maintenant.getDate();
 var mois = maintenant.getMonth() + 1;
 var an = maintenant.getYear();
 if (an < 999) an+=1900;
 var heures = maintenant.getHours();
 var minutes = maintenant.getMinutes();
 var secondes = maintenant.getSeconds();
 var joursem = maintenant.getDay();
 var jourprec  = ((jour < 10) ? "0" : "");
 var moisprec  = ((mois < 10) ? ".0" : ".");
 var heuresprec  = ((heures < 10) ? "0" : "");
 var minprec  = ((minutes < 10) ? ":0" : ":");
 var secprec  = ((secondes < 10) ? ":0" : ":");
 var Datum = jourprec + jour + moisprec + mois  + "." + an;
 var temps = heuresprec + heures + minprec + minutes + secprec + secondes;
 var tout = Datum + "<br>" + joursemaine[joursem] + "<br>" + temps;

4* if(document.all)
   document.all.heuremicrosoft.innerHTML = tout;
 else if(document.layers)
  {
   document.heurenetscape.document.open();
   tout = '<span class="heure")>' + tout + '</span>';
   document.heurenetscape.document.write(tout);
   document.heurenetscape.document.close();
  }

 window.setTimeout("afficheheure()",1000);
}
// -->
</script>
</head>
<body bgcolor=#FFFFFF>

1* <div id="heuremicrosoft" class="heure">
</div>

<layer id="heurenetscape">
</layer>

3* <script language="JavaScript">
<!--
window.setTimeout("afficheheure()",1000);
// -->
</script>

</body>
</html>

Explication:

Dans le corps du fichier HTML de l'exemple ont été définis deux conteneurs vides: un passage <div> et un passage <layer> (1*). Les noms id des deux passages disent déjà tout sur leur signification: le passage <div> est défini pour l'Explorer Internet MS, le passage <layer> pour Netscape. Netscape connaît bien les deux repères HTML, n'affichera pourtant en aucune façon le passage <div>, parce que celui-ci est vide.

De plus, le fichier exemple contient deux passages JavaScript. L'un des passages est noté dans l'entête de fichier (2*), l'autre sous les deux "conteneurs" (3*). Dans le passage JavaScript du bas, il ne se passe rien d'autre que le premier appel de la fonction JavaScript afficheheure(), qui se trouve dans le passage script du haut et qui assure l'affichage de l'heure. L'appel se fait par l'incorporation dans une méthode setTimeout() de 1000 millièmes de secondes, donc d'une seconde. Ceci est nécessaire étant donné que l'Explorer Internet MS sort dans le cas contraire un message d'erreur étrange (aucune raison particulière, ce sont des problèmes typiques qui ne sont à résoudre que par de longs essais).

Dans le passage JavaScript de l'entête de fichier est défini dés la lecture du fichier un array global pour les jours de la semaine en français. En dessous se trouve la fonction afficheheure(), qui assure l'affichage dynamique de la date et de l'heure. La fonction recherche d'abord, à l'aide de l'objet Date, l'heure actuelle. À l'aide de différentes commandes de formatage est ensuite créée une chaîne de caractères qui représente un affichage propre et conventionnel de la date et de l'heure. Cette chaîne de caractères est sauvegardée dans la variable nommée tout. Toutes ces choses n'ont encore rien à voir avec l'affichage et fonctionnent sans problème avec les deux navigateurs.

La requête déterminante pour différencier les navigateurs intervient dans les instructions (4*):
if(document.all) et
else if(document.layers)
Il s'agit de requête pour vérifier si l'objet concerné existe. L'Explorer Internet MS connaît l'objet all, mais pas l'objet layers. Netscape par contre connaît l'objet layers, mais pas l'objet all. Les navigateurs plus anciens qui ne connaissent aucun de ces deux objets JavaScript, ne sont orientés sur aucune de ces deux branches.

Pour l'Explorer Internet MS la chose est relativement simple. Avec la propriété innerHTML de l'objet all, il est possible à tout moment de fixer un nouveau contenu pour un élément HTML. Avec document.all.heuremicrosoft, l'élément qui a reçu avec id= le nom correspondant est adressé, à savoir le passage <div>. La propriété innerHTML se voit simplement affecter la valeur de la variable tout. Ainsi l'Explorer Internet affiche-t-il l'heure actuelle dans le passage <div>.

Pour Netscape, l'exemple met en valeur la propriété qu'un layer est une sorte de document à l'intérieur d'un document, et dans lequel on peut donc à chaque instant écrire des nouvelles données à l'aide de document.write(). Le document dans le document est adressé dans l'exemple avec document.heurenetscape.document. Pour cela, heurenetscape est le nom que le layer a reçu avec id=. Il est très important de noter d'abord document.open() ainsi qu'à la fin document.close(). Autrement, Netscape n'écraserait pas l'affichage de l'heure toutes les secondes, mais inscrirait l'heure chaque seconde derrière la précédente sans interruption.

Malheureusement Netscape ne prend pas en charge avec document.write() les mentions de style CSS. C'est pourquoi, dans la commande document.write(), est rappelée en dynamique l'affectation nécessaire avec un repère <span>. Toutes les mentions faisant partie du formatage de l'heure figurent dans un passage de feuilles de style de l'entête de fichier.


après:	Éléments de page pouvant être déplacés
avant:	Positionnement dynamique (Netscape)

SELFHTML/Quickbar HTML dynamique Solutions pour la pratique