Comment faire un compte à rebours en JavaScript ?

Réponses rédigées par Antoine
Dernière mise à jour : 2022-09-09 14:44:31
Thèmes : javascript - compte-a-rebours
Question

Comment faire pour créer un compte à rebours en JavaScript ?

Réponse

Vous pouvez créer une fonction pour afficher un compte à rebours en JavaScript. Cette fonction s'exécute toutes les 1000 ms, comme explicité sur cette autre question.

One utilise principalement la méthode getTime() qui permet de renvoyer la valeur numérique des dates ; et ainsi d'effectuer les opérations mathématique pour calculer les nombres de jours, heures, minutes et secondes du compte à rebours.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment faire un compte à rebours en JavaScript ?</title>
</head>
<body>
<div id="rebours"></div>
<script>
function pause(ms) 
{
  return new Promise(resolve => setTimeout(resolve, ms));
}
async function compteRebours(a,m,j,h,mm,s)
{
  for (let i = 0; i < 100; i++) 
  {
    await pause(1000);
    var date = new Date(a,m,j,h,mm,s);
    var options = {weekday: "long", year: "numeric", month: "long", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit"};
    var date_fr = new Date(date).toLocaleDateString("fr-FR", options);
    var date_numerique = new Date(date).getTime();
    var maintenant = new Date().getTime();
    var ecart = date_numerique - maintenant;
    var jours = Math.floor(ecart / (1000 * 60 * 60 * 24));
    var heures = Math.floor((ecart % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((ecart % (1000 * 60 * 60)) / (1000 * 60));
    var secondes = Math.floor((ecart % (1000 * 60)) / 1000);
    document.getElementById("rebours").innerHTML = "Compte à rebours avant le " + date_fr + " : " + jours + "j " + heures + "h " + minutes + "m " + secondes + "s ";
    if (ecart < 0) 
    {
      break;
      document.getElementById("rebours").innerHTML = "Compte à rebours terminé";
    }
  }
}

// compte à rebours avant le premier janvier 2025 à 11:08:35
compteRebours(2025, 0, 1, 11, 08, 35);
</script>
</body>
</html>

Vous trouverez une démo de ce script de compte à rebours en JavaScript , via le Bac à codes.