Comment afficher une image selon l'heure en HTML et JavaScript ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-10-06 12:40:32

Question

Comment faire pour afficher une image selon l'heure en HTML et JavaScript ?

Réponse

Vous pouvez utiliser JavaScript de la manière suivante pour afficher une image selon une heure, ou un créneau horaire :

<!DOCTYPE html> 
<html> 
<head>
<meta charset="UTF-8">
<title>Comment afficher une image selon l'heure en HTML et JavaScript ?</title>
</head>
<body>
<span id="image"></span> 
<script>
function pause(ms) 
{
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function afficherImage() 
{
  while(true) 
  {
    await pause(1000);
    var cejour = new Date();
    var heure = cejour.getHours();
    if ((heure > "19") && (heure < "9")){var gif = "https://www.collaborativejob.com/logo.png";}
    else if ((heure >= "9") && (heure <= "19")){var gif = "https://www.collaborativejob.com/os.jpg";}
    document.getElementById('image').innerHTML = "<img src='"+ gif +"' alt=''>";
  }
}
afficherImage();
</script>
</body>
</html>

Avec cette solution l'image change dynamiquement lors du changement d'heure, ou de créneau horaire.

Remarque : getUTCHours() permet de se baser sur l'heure UTC, alors que getHours() se base sur l'heure de l'ordinateur de l'internaute.