SELFHTML: JavaScript / Exemples d'application / Afficher la durée de visite sur une page Web

SELFHTML/Aides à la navigation

JavaScript/DOM

Exemples d'application

Afficher la durée de visite sur une page Web

Remarques sur cet exemple
Texte source avec explications

Exemple d'affichage: aperçu

Remarques sur cet exemple

L'exemple de cette page affiche en permanence, dans un petit champ de saisie, combien de minutes et de secondes se sont écoulées depuis l'appel de la page. L'affichage du champ est conçu avant tout pour des fichiers HTML devant être affichés en permanence, comme dans une fenêtre cadre avec un logo ou avec des liens. Dans de tels cas, le chrono tourne pendant tout le temps que l'utilisateur passe sur les pages. Ceci peut apparaître être un jouet superflu - mais supposez que quelque chose soit affiché qui intéresse réellement l'utilisateur au point qu'il en oublie le temps coûteux qu'il est en ligne, comme par exemple un jeu ou une fenêtre de discussion... Un tel petit "pense-bête" sous forme de chronomètre peut s'avérer bien utile.

Texte source avec explications

L'exemple montre le fichier HTML qui contient le JavaScript et l'affichage de l'heure. Dans l'exemple d'affichage, ce fichier est incorporé dans un jeu de cadres.

Exemple:

Exemple d'affichage: aperçu

<html>
<head>
<title>Afficher la durée de visite sur une page Web</title>
<script type="text/javascript">
<!--
var maintenant = new Date();
var Start = maintenant.getTime();

function affiche_heure() {
var secondes_abs = Math.round(calcul_temps());
var secondes_rel = secondes_abs % 60;
var minutes_abs = Math.abs(Math.round(secondes_abs-30)/60));

var nombre_secondes ="" + ((secondes_rel > 9) ? secondes_rel : "0" + secondes_rel);
var nombre_minutes ="" + ((minutes_abs > 9) ? minutes_abs : "0" + minutes_abs);
window.document.affiche.temps.value = nombre_minutes + ":" + nombre_secondes;
window.setTimeout('affiche_heure()',1000);
}

function calcul_temps() {
var encore_toujours = new Date();
return((encore_toujours.getTime() - Start)/1000);
}
// -->
</script>
</head>
<body bgcolor="#EEEEEE" text="#000000" onLoad="window.setTimeout('affiche_heure()',1000)">

<form name="affiche" action="">
<input size="7" name="temps" value="00:00">
</form>

<p>Bon amusement dans la fenêtre cadre de droite!</p>

</body>
</html>

Explication:

rechercher le temps de départ:

À la lecture du fichier sont recherchées dans un premier temps les date et heure actuelles, qui serviront comme temps de départ pour l'affichage. Avec maintenant = new Date() est sauvegardé dans la variable maintenant un nouvel objet Date avec les date et heure actuelles. Avec maintenant.getTime est recherché un nombre absolu en millièmes de seconde qui est sauvegardé dans la variable Start.

appeler la fonction pour l'affichage du temps pour la première fois:

Dans le repère d'ouverture <body> de l'exemple se trouve le premier appel de la fonction affiche_heure(), qui affiche le temps et actualise l'affichage chaque seconde. Le premier appel a lieu après une seconde. À cet effet, le premier appel de la fonction est incorporé dans la méthode setTimeout() avec une période de retard de 1000 millièmes de seconde (1 seconde).
Dans le corps de fichier se trouve ensuite un formulaire constitué d'un simple petit champ de saisie. Ce champ de saisie est utilisé comme champ de sortie pour l'affichage du temps. Il est occupé par une valeur par défaut de 00:00, afin qu'un affichage ait lieu dès la première seconde.

afficher le temps et actualiser l'affichage en permanence:

La fonction affiche_heure(), qui assure l'affichage continuel du temps, appelle d'abord la sous-fonction calcul_temps(). Cette fonction crée à chaque appel un nouvel objet Date avec date et heure actuelles. Le résultat est sauvegardé dans la variable encore_toujours. La valeur retournée n'est cependant pas les date et heure actuelles, mais la différence entre celles-ci et les date et heure de départ qui ont été recherchées à la lecture du fichier. La valeur retournée est exprimée en secondes. Pour obtenir celles-ci, la valeur est divisée par 1000, étant donné que, pour un objet Date, le calcul interne est effectué en millièmes de secondes. Ce faisant, il peut arriver que l'on obtienne toutefois des décimales. Pour obtenir un nombre rond de secondes, la fonction appelante affiche_heure() emploie la méthode Math.round().

Le nombre absolu des secondes écoulées se trouve alors dans la variable secondes_abs. De la valeur sauvegardée dans secondes_abs sont issues toutes les valeurs suivantes. Avec Math.round((secondes_abs-30)/60), il est recherché à combien de minutes le nombre de secondes correspond. Si par exemple, le nombre de secondes est 200, cela implique que 3 minutes (180 secondes) y sont contenues. Cette valeur est sauvegardée dans la variable minutes_abs. Étant donné qu'Opera 5.12 donne comme résultat de l'opération -0 dans les 30 premières secondes, il est recherché pour empêcher l'affichage d'un nombre négatif le montant absolu de la valeur avec Math.abs. Le reste en secondes (donc si l'on reprend par exemple 200 et 180 la valeur de 20 secondes) est sauvegardé avec la division modulo secondes_abs % 60 dans la variable secondes_rel. Il y aura donc la valeur 3 dans minutes_abs et la valeur 20 dans secondes_rel.

Pour formater correctement l'affichage des minutes et secondes sont créées des chaînes de caractères qui sont sauvegardées dans les variables nombre_secondes et nombre_minutes. Si le nombre de minutes ou de secondes ne contient qu'un seul chiffre, un 0 est alors placé devant.

Avec l'affectation à window.document.affiche.temps.value, le temps recherché et formaté est écrit ensuite dans le champ du formulaire servant à l'affichage. Pour que l'affichage du temps soit continu, la fonction affiche_heure() s'appelle à la fin elle-même, avec un délai de 1000 millièmes de secondes. Ainsi, c'est tout le processus qui est relancé.


	Liste de liens comme liste de choix
	Boutons graphiques dynamiques

SELFHTML/Aides à la navigation

JavaScript/DOM

Exemples d'application