Comment afficher un texte selon l'heure en HTML et JavaScript ?

Réponses rédigées par Antoine
Dernière mise à jour : 2022-03-09 12:03:16
Thèmes : heure - texte - html - javascript
Question

Bonjour, je souhaite afficher l'heure du jour avec un texte en dessous. Ce texte est différent pour chaque heure. Ainsi à l'heure 1 c'est le texte 1, à l'heure 2, le texte 2, et ainsi de suite jusqu'au texte 24.

J'utilise google site ; il permet d'intégrer du code. Je suis avec Mac, Mojave 10.14.6

Réponse

Vous pouvez utiliser JavaScript de la manière suivante pour afficher l'heure, et un texte correspondant à chaque heure :

<span id="heure"></span> 
<script>
function pause(ms) 
{
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function afficherHeure() 
{
  while(true) 
  {
    await pause(1000);
    var cejour = new Date();
    var heure = cejour.getHours();
    if (heure == "0"){var texte = "Il est minuit passé";}
    else if (heure == "1"){var texte = "Il est une heure du matin passé";}
    else if (heure == "2"){var texte = "Il est deux heure du matin passé";}
    else if ((heure > "2") && (heure < "12")){var texte = "Il est entre deux heure du matin et midi";}
    else if ((heure >= "12") && (heure <= "23")){var texte = "Il est entre midi et 11 heure du soir";}
    else var texte = "Il est entre minuit et une heure du matin";

    var aficher_heure = ("0" + cejour.getHours()).slice(-2) + ":" + ("0" + cejour.getMinutes()).slice(-2) + ":" + ("0" + cejour.getSeconds()).slice(-2);
    document.getElementById('heure').innerHTML = aficher_heure + "<br>" + texte;
  }
}
afficherHeure();
</script>

Placez ce code à l'endroit où vous voulez afficher l'heure et le texte. Il vous suffit d'adapter l'enchainement des if, else if et else pour personnaliser vos textes selon l'heure ou le créneau horaire.