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

SELFHTML/Aides à la navigation

HTML dynamique

Solutions pour la pratique

Affichage de la date et de l'heure

Remarques sur cet exemple
Texte source avec explications

Exemple d'affichage: aperçu

Remarques sur cet exemple

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. Dans la pratique, une telle horloge est appropriée par exemple pour des pages affichées en permanence par exemple dans une fenêtre cadre dont la contenu ne change pas pendant la navigation, ou bien sur des pages qui contiennent des jeux multimédia ou un clavardage incorporé - donc sur des pages que l'utilisateur laisse longtemps affichées sans les faire défiler et sans les quitter.

L'exemple utilise la bibliothèque DHTML générale, pour faire ce qui est nécessaire en HTML dynamique dans l'exemple.

Texte source avec explications

L'exemple montre un fichier HTML complet dans lequel est incorporée une horloge avec la date. Le fichier dhtml.js, dans lequel les fonctions de la bibliothèque DHTML sont contenues, doit être doit être disponible et se trouver dans l'exemple, dans le même répertoire que le fichier HTML.

Exemple:

Exemple d'affichage: aperçu ( Bibliothèque DHTML générale)

<html><head><title>Test</title>
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
<!--
function afficher_heure() {
var jour_semaine =  new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");

 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 jour_sem = maintenant.getDay();
 var jour_prec  = ((jour < 10) ? "0" : "");
 var mois_prec  = ((mois < 10) ? ".0" : ".");
 var heure_prec  = ((heures < 10) ? "0" : "");
 var minutes_prec  = ((minutes < 10) ? ":0" : ":");
 var secondes_prec  = ((secondes < 10) ? ":0" : ":");
 var Datum = jour_prec + jour + mois_prec + mois  + "." + an;
 var temps = heure_prec + heures + minutes_prec + minutes + secondes_prec + secondes;
 var tout = jour_semaine[jour_sem] + ", " + Datum + ", " + temps;

 if(DHTML) {
   if(NS) setCont("id","pendule",null,"<span class=\"pendule\">" + tout + "<\/span>");
   else   setCont("id","pendule",null,tout);
 }
 else return;

 window.setTimeout("afficher_heure()",1000);
}
//-->
</script>
<style type="text/css">
<!--
#pendule { position:absolute; top:10px; left:10px; }
#reste_page { position:absolute; top:50px; left:10px; }
.pendule { font-family:Arial; font-size:24px; color:blue; }
.reste_page { font-family:Arial; color:black; }
-->
</style>

</head>
<body onLoad="window.setTimeout('afficher_heure()',1000)">

<div id="pendule" class="pendule">&nbsp;</div>

<div id="reste_page" class="reste_page">

<h1>Bienvenue sur cette page</h1>
<p>ici ça continue tout à fait normalement</p>

</div>
</body></html>

Explication:

Dans le corps du fichier HTML de l'exemple ont été définis deux passages div. Les deux passages reçoivent un nom Id et se voient affecter par leur nom Id respectif dans le passage style de l'entête de fichier, des propriétés CSS correspondantes. Les deux passages sont positionnés de façon absolue. Sans cette astuce, tout ceci ne pourrait pas être réalisé avec Netscape 4.x. Le premier passage sert à l'affichage de l'heure et de la date, et le deuxième passage contient tout le reste du fichier, ce pourquoi il porte le nom reste_page.

Le premier passage ne contient dans un premier temps qu'un espace imposé. Ainsi, on ne voit tout d'abord rien du passage mais l'espace est important pour que le passage ait un contenu. Sinon le premier accès dynamique à son contenu avec un navigateur supportant le modèle DOM ou avec les fonctions de la bibliothèque DHTML provoquerait une erreur.

Par ailleurs, le fichier d'exemple contient deux passages script dans l'entête de fichier. Dans le premier passage JavaScript vide est incorporée la bibliothèque de fonctions, dans le deuxième se trouve la fonction afficher_heure(), qui assume l'affichage de l'heure et de la date. Dans le repère d'ouverture <body> est noté le gestionnaire d'événement onLoad, qui entre en action quand le fichier et toutes les ressources qui lui sont incorporées sont chargés complètement. À ce gestionnaire d'événement est affecté un appel de fonction. Il lance la fonction afficher_heure(), incorporée cependant dans une instruction setTimeout qui diffère l'appel d'une seconde ou plutôt de 1000 millièmes de seconde. Dans la première seconde, rien encore n'est donc encore affiché.

Dans la fonction afficher_heure() est défini dans un premier temps est défini un tableau pour les jours de semaine en français. Enfin la fonction recherche à l'aide de l'objet Date l'heure et la date actuelles. À l'aide de différentes commandes de formatage, elle crée ensuite une chaîne de caractères qui contient une représentation correcte de la date et de l'heure d'après les conventions françaises. 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.

La partie DHTML proprement-dite n'est pas un gros problème grâce à la bibliothèque DHTML incorporée. Avec if(DHTML) il est d'abord demandé si HTML dynamique est bien disponible. Tout le code pour écrire de façon dynamique dans le passage div en dépend. Ainsi les messages d'erreur, dans les navigateurs qui supportent JavaScript certes mais pas HTML dynamique, sont-ils évités. Ensuite, il est demandé s'il est travaillé avec l'ancien modèle Netscape. Dans l'affirmative, l'écriture dynamique dans le passage div est un peu différente que celle des autres cas. La raison en est une autre faiblesse du navigateur Netscape 4. Il ignorerait la classe CSS pendule dans le repère d'ouverture div, si on ne lui écrivait pas une autre fois sous la forme d'un élément span dans le passage dynamique. Ce n'est que de cette façon que l'affichage de la date et de l'heure reçoit les formatages CSS qui ont été fixés dans le passage style de l'entête de fichier pour la classe pendule. La modification dynamique du contenu de div a lieu par l'appel de la fonction de bibliothèque setCont() qui s'occupe de tous les autres détails.

Dans la dernière instruction de la fonction afficher_heure() la fonction s'appelle elle-même et cela avec un délai de 1000 millièmes de seconde ou une seconde provoqué par window.setTimeout(). Ainsi pendant une seconde il ne se passe rien, puis l'heure est à nouveau inscrite.


	Livre d'images à feuilleter
	Barre de navigation dynamique

SELFHTML/Aides à la navigation

HTML dynamique

Solutions pour la pratique