Affichage de l'heure et date courantes

Affichage de l'heure courante

Affichage de l'heure courante dans la boite grisée avec actualisation chaque seconde !

Le code de la page (extraits)

... <p>Rafraîchissement de l'affichage à chaque seconde !</p> <div style = "width : 400px ; 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(); var heureGMT = heure.toGMTString(); boite1.textContent = "il est : " + heure.getHours()+":"+heure.getMinutes()+":"+heure.getSeconds() + " Mais en GMT il est : "+ heureGMT; } setInterval("horloge()", 1000); </script> ...

Commentaire du code

Code CSS dans balise DIV : l'heure affichée est centrée verticalement (car la ligne unique a la même hauteur que la boite parente) et horizontalement dans la boite avec text-align

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.
Grâce à la méthode toGMTString() l'instant présent s'affiche à l'heure GMT (heure universelle).
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 un noeud il faut utiliser la propriété innerHTML et non pas textContent.

Affichage de la date courante

Vous savez désormais afficher l'heure courante. Voyons maintenant l'affichage de la date courante.
Il faut appliquer à l'instant présent d'autres méthodes "get".
Exemple

Le code JS de l'exemple

var aujourdhui = new Date(); var annee = aujourdhui.getFullYear(); // retourne le millésime var mois =aujourdhui.getMonth()+1; // date.getMonth retourne un entier entre 0 et 11 donc il faut ajouter 1 var jour = aujourdhui.getDate(); // retourne le jour (1à 31) document.write('nous sommes le : ' + jour +'/' + mois + '/' + annee) ;

Commentaire

Les différentes méthodes que l'on peut appliquer à un objet Date

Sachez qu'il existe aussi les méthodes "set" : setFullYear(), setYear(), setMonth(), setDate(), setMinutes(), setSeconds(), etc.
Retour menu