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

SELFHTML/Quickbar JavaScript Exemples d'application

	Afficher la durée de visite sur une page Web
	Afficher la durée de visite sur une page Web - l'exemple

Afficher la durée de visite sur une page Web - l'exemple

Exemple d'affichage: aperçu

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 frame 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!

Remarque: Pour une meilleure orientation dans l'exemple, celui-ci contient des liens aux explications respectives par exemple: 1*. Ces liens ne font pas partie du code source. Si vous copiez cet exemple dans un éditeur, vous devez effacer ces liens faute de quoi vous recevriez des messages d'erreur JavaScript.

Exemple:

 <html>
 <head>
 <title>Titre de page</title>
 <script language="JavaScript">
  <!--
   1* maintenant = new Date();
   var Start = maintenant.getTime();

   3* function afficheure()
   {
    var secondeabs = Math.round(calcultemps());
    var seconderel = secondeabs % 60;
    var minuteabs = Math.round((secondeabs-30)/60);
    var nbseconde ="" + ((seconderel > 9) ? seconderel : "0" + seconderel);
    var nbminute ="" + ((minuteabs > 9) ? minuteabs : "0" + minuteabs);
    window.document.affiche.temps.value = nbminute + ":" + nbseconde;
    window.setTimeout('afficheure()',1000);
   }

   function calcultemps()
   {
    var encoretjrs = new Date();
    return((encoretjrs.getTime() - Start)/1000);
   }

  //-->
 </script>
 </head>
 2* <body onLoad="window.setTimeout('afficheure()',1000)">
<form name="affiche">
<input size=7 name="temps">
</form>
 </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 afficheure(), 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

afficher le temps et actualiser l'affichage en permanence
La fonction afficheure(), qui assure l'affichage continuel du temps, appelle d'abord la sous-fonction calcultemps(). Cette fonction crée à chaque appel un nouvel objet Date avec date et heure actuelles. Le résultat est sauvegardé dans la variable encoretjrs. 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 afficheure() emploie la méthode Math.round().

Le nombre absolu des secondes écoulées se trouve alors dans la variable secondeabs. De la valeur sauvegardée dans secondeabs sont issues toutes les valeurs suivantes. Avec Math.round((secondeabs-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 minuteabs. Le reste en secondes (donc si l'on reprend par exemple 200 et 180: 20 secondes) est sauvegardé avec la division modulo secondeabs % 60 dans la variable seconderel. Il y aura donc la valeur 3 dans minuteabs et la valeur 20 dans seconderel.

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 nbseconde et nbminute. 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 afficheure() 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é.


après:	Liste de liens comme liste de choix
avant:	Boutons graphiques dynamiques

SELFHTML/Quickbar JavaScript Exemples d'application