Comment afficher la date et l'heure qui avancent en JavaScript ?
Bonjour, je voudrais afficher la date et l'heure en temps réel sur mon site, avec le temps qui avance, et au format : Mercredi 04 Août 2021 20:08:55. Merci.
Il vous faut utiliser la fonction JavaScript toLocaleDateString avec ses options pour afficher la date en français.
Pour l'heure, vous pouvez utiliser les fonctions JavaScript getHours(), getMinutes() et getSeconds(), avec la fonction slice(), pour ajouter un zéro permanent non significatif.
Pour que l'heure avance et l'afficher en temps réel, vous pouvez faire une boucle infinie, avec une pause de 1000ms entre chaque itération.
On utilise enfin une expression régulière pour mettre les premières lettres des jours et des mois en majuscules
Voici le code pour afficher la date et l'heure en temps réel en JavaScript :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment afficher la date et l'heure qui avancent en JavaScript ?</title>
</head>
<body>
<span id="dateheure"></span>
<script>
function pause(ms)
{
return new Promise(resolve => setTimeout(resolve, ms));
}
async function afficherDate()
{
while(true)
{
await pause(1000);
var cejour = new Date();
var options = {weekday: "long", year: "numeric", month: "long", day: "2-digit"};
var date = cejour.toLocaleDateString("fr-FR", options);
var heure = ("0" + cejour.getHours()).slice(-2) + ":" + ("0" + cejour.getMinutes()).slice(-2) + ":" + ("0" + cejour.getSeconds()).slice(-2);
var dateheure = date + " " + heure;
var dateheure = dateheure.replace(/(^\w{1})|(\s+\w{1})/g, lettre => lettre.toUpperCase());
document.getElementById('dateheure').innerHTML = dateheure;
}
}
afficherDate();
</script>
</body>
</html>
Démo via le Bac à Codes.