JavaScript : affichage de l'heure courante

Rafraîchissement de l'affichage à chaque seconde !

Le code de la page (extraits)

... <p>Rafraîchissement de l'affichage à chaque seconde !</p> <div style = "width : 200px ; height : 50px ; background : grey ; color: white ; text-align : center;line-height :50px; "></div> ... <script> var boite = document.querySelector('div'); // variable objet function horloge() { var heure =new Date(); boite.textContent = "il est : " + heure.getHours()+":"+heure.getMinutes()+":"+heure.getSeconds(); } setInterval("horloge()", 1000); </script> ...

Commentaire du code

CSS : l'heure affichée est centrée verticalement (car la ligne unique a la même hauteur que la boîte) et horizontalement dans la boîte.

JavaScript : La fonction horloge est appelée toutes les 1000 millisecondes c'est à dire à chaque seconde grâce à la fonction setInterval.
La fonction setInterval a obligatoirement deux arguments : fonction appelée , fréquence d'appel en millisecondes.

Analysons maintenant la fonction horloge !
Dans la variable heure on récupère l'instant présent. Faut-il rappeler que le constructeur New Date() sans paramètre permet de créer une "instance de l'objet Date" correspondant à l'instant présent.
Les méthodes getHours, getMinutes, getSeconds appliquées à un objet Date retournent respectivement l'heure, minutes et les secondes de cet instant.
La propriété textContent appliquée à un élément HTML permet de modifier le contenu de ce "noeud".

Attention : si vous voulez insérer du code HTML dans le contenu du noeud il faut utiliser la propriété innerHTML et non pas textContent.

Retour menu