Obtenir l'heure actuelle en JavaScript
-
Obtenir l’heure actuelle avec l’objet
Dateen JavaScript - Obtenir l’heure actuelle au format UTC en JavaScript
- Obtenir l’heure actuelle entière au format local en JavaScript
Il peut arriver que vous souhaitiez afficher la date ou l’heure actuelle sur votre site Web, par exemple lorsque vous créez une application Web telle qu’une horloge numérique dans laquelle vous souhaitez afficher l’heure actuelle à l’utilisateur. Cela peut facilement être fait à l’aide de l’objet Date fourni par le langage JavaScript.
Obtenir l’heure actuelle avec l’objet Date en JavaScript
L’objet Date en JavaScript nous permet de travailler avec la date et l’heure. En utilisant cet objet, nous pouvons soit définir l’heure manuellement, puis l’obtenir, soit obtenir les données sur l’heure actuelle. Voici quelques-unes des méthodes que nous pouvons utiliser pour obtenir l’heure en JavaScript.
| Méthodes | Objectif |
|---|---|
getHours() |
Il renvoie les heures, selon le temps universel (0-23) |
getMinutes() |
Il renvoie les minutes, selon le temps universel (0-59) |
getSeconds() |
Il renvoie les secondes, selon le temps universel (0-59) |
Essayons de comprendre cela à l’aide de l’exemple de code ci-dessous. Le programme ci-dessous affichera l’heure actuelle sur le navigateur. Nous savons tous que le temps se compose de trois choses: les heures, les minutes et les secondes. Pour obtenir chacune de ces données, nous avons différentes méthodes disponibles en JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<p id="displayHours"></p>
<p id="displayMinutes"></p>
<p id="displaySeconds"></p>
<script>
var displayHours = document.getElementById('displayHours');
var displayMinutes = document.getElementById('displayMinutes');
var displaySeconds = document.getElementById('displaySeconds');
var currentTime = new Date();
displayHours.innerHTML = currentTime.getHours() + " hrs";
displayMinutes.innerHTML = currentTime.getMinutes() + " min";
displaySeconds.innerHTML = currentTime.getSeconds() + " sec";
</script>
</body>
</html>
Production:
22 hrs
56 min
19 sec
Pour afficher ces 3 choses sur la page Web, nous utiliserons 3 balises de paragraphe. Chacune de ces balises est associée à un id. Grâce à cet id, nous pourrons accéder à ces éléments HTML dans notre programme JavaScript en utilisant la méthode document.getElementById(). Ensuite, nous stockerons chacune de ces balises HTML à l’intérieur des variables avec les noms displayHours, displayMinutes et displaySeconds.
Pour obtenir l’heure courante, nous devons appeler l’objet Date en tant que constructeur (notez que nous avons là un mot-clé new). Cet objet Date renverra un nombre que nous stockerons dans la variable currentTime. La variable currentTime contient désormais toute l’heure (heures, minutes et secondes).
Nous avons l’heure actuelle et les 3 balises de paragraphe, à l’aide desquelles nous afficherons l’heure sur notre navigateur. Pour obtenir les champs individuels, c’est-à-dire les heures, les minutes et les secondes, nous utiliserons les méthodes getHours(), getMinutes() et getSeconds() respectivement sur la variable currentTime. En utilisant la propriété innerHTML, nous pouvons attribuer ces champs individuels à chacune des balises de paragraphe. Si vous exécutez le code ci-dessus sur le navigateur en tant que document HTML, vous obtiendrez l’heure actuelle en tant que sortie dans la fenêtre du navigateur.
Étant donné que ce programme affichera l’heure locale actuelle en fonction de notre ordinateur, la sortie ci-dessus peut varier en fonction de l’heure à laquelle vous exécutez le code ci-dessus.
Si vous voulez l’heure entière avec le format de l’heure (GMT, UTC, IST, etc) et la date, vous pouvez directement affecter la variable currentTime à la balise de paragraphe en utilisant la propriété innerHTML comme indiqué ci-dessous.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<p id="dateAndTime"></p>
<script>
var dateAndTime = document.getElementById('dateAndTime');
var currentTime = new Date();
dateAndTime.innerHTML = currentTime;
</script>
</body>
</html>
Production:
Wed Apr 14 2021 23:30:12 GMT+0530 (India Standard Time)
Obtenir l’heure actuelle au format UTC en JavaScript
Il existe différentes méthodes à l’aide desquelles vous pouvez obtenir l’heure au format UTC (Universal Time Coordinate). Ces méthodes fonctionnent presque de la même manière que celles des méthodes ci-dessus.
Vous trouverez ci-dessous une liste de méthodes qui vous donneront l’heure au format UTC.
| Méthodes | Objectif |
|---|---|
getUTCHours() |
Il renvoie la valeur de l’heure au format d’heure universelle (0-23) |
getUTCMinutes() |
Il renvoie la valeur des minutes au format d’heure universelle (0-59) |
getUTCSeconds() |
Il renvoie la valeur des secondes au format d’heure universelle (0-59) |
Obtenir l’heure actuelle entière au format local en JavaScript
Les méthodes que nous avons vues ne renvoient qu’une partie particulière du temps, soit seulement des heures, des minutes ou des secondes et non le temps entier lui-même. Ainsi, pour obtenir toute l’heure actuelle au format local, nous pouvons utiliser une méthode nommée toLocaleTimeString().
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<p id="dateAndTime"></p>
<script>
var dateAndTime = document.getElementById('dateAndTime');
var currentTime = new Date();
dateAndTime.innerHTML = currentTime.toLocaleTimeString();
</script>
</body>
</html>
Production:
11:43:06 PM
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn