Cours Web

Réalisation de sites Internet Lausanne

Horloge

Voici un exemple simple d'horloge "temps réel" en DHTML. L'horologe ci-dessous est affichée toute les 200 milisecondes (5 fois par seconde).

00:00

Le réalisation d'une telle horloge est simple et repose sur deux éléments essentiels du DHTML, à savoir:

1) La possiblité de modifier dynamiquement (à l'execution), une partie de la page HTML sans la recharger.

2) La possibilité d'exécuter une fonction javascript à intervals de temps réguliers.

Il faut d'abord créer un élément html qui contiendra le texte de l'horloge, on marque cet élément avec un attribut id, par exemple:

<div id='horloge'>00:00</div>

On place ensuite le javascript ci-dessous, après l'élément ci-dessus.

<script language='javascript' type='text/javascript'>

function affiche() {
  var h = document.getElementById('horloge');
  h.innerHTML = new Date();
  window.setTimeout('affiche();', 200);
}

affiche(); // provoque la première exécution de la fonction

</script>

Ce petit script déclare une fonction affiche() qui effectue les opérations suivantes:

1) demande à l'object document de nous retourner une référence sur l'élément dont l'id est horloge. Dans notre cas, la variable h représentera l'élément div contenant l'horloge.

2) On modifie le contenu du bloc div grace à la propriété innerHTML qui nous permet d'y écrire ce que l'on veut. Dans notre exemple, on y place new Date(), ce qui crée un objet date à l'heure courrante.

3) Enfin, on demande la création d'un appel de fonction différé. window.setTimeout permet de programmer un appel de fonction qui sera executé 200 milisecondes plus tard dans notre exemple.

La fonction affiche() s'appelle elle-même à l'infini. C'est ce qui donne l'impression de dynamisme à l'horloge. Ce script ne fonctionnerait pas si on appelait pas la fonction affiche() au moins une fois, pour lancer le mécanisme. C'est ce qui est fait à la dernière ligne du script: affiche();