Javascript : créer un compte à rebours

Publié le par
Javascript : créer un compte à rebours

Voyons ensemble dans ce petit tutoriel comment mettre en place simplement un compte à rebours en javascript.

Commençons par écrire notre structure HTML : 

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript : Compte à rebours</title>
</head>
<body>
    <div class="box-rebours">        
        <div class="box_jour">
            <div id="jour">00</div>
            <span id="jour_label">Jours</span>
        </div>
        <div class="box_heure">
            <div id="heure">00</div>
            <span id="heure_label">Heures</span>
        </div>
        <div class="box_minute">
            <div id="minute">00</div>
            <span id="minute_label">Minutes</span>
        </div>
        <div class="box_seconde">
            <div id="seconde">00</div>
            <span id="seconde_label">Secondes</span>
        </div>
    </div>
</body>
</html>

Rien de bien méchant. Nous avons juste créer des conteneurs (div) pour chaque unité de mesure du temps à savoir jour, heure, minute, seconde et nous avons enveloppé tout ça dans un autre conteneur pour appliquer un certain style à l’ensemble.

Maintenant, stylisons un peu tout ça pour avoir un rendu acceptable :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript : Compte à rebours</title>

    <style>
        body{ 
            margin:0; 
        }
        .box-rebours{ 
            height: 100vh; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            text-align: center; 
        }
        .box_jour, .box_heure, .box_minute, .box_seconde { 
            padding: 10px; 
        }
        #jour, #heure, #minute, #seconde { 
            background:black; 
            padding: 10px 20px; 
            color: white; 
            font-size: 3rem; 
            font-weight: bold; 
        }
        #jour_label, #heure_label, #minute_label, #seconde_label { 
            font-size: 1.5rem; 
        }
    </style>
</head>
<body>
    <div class="box-rebours">        
        <div class="box_jour">
            <div id="jour">00</div>
            <span id="jour_label">Jours</span>
        </div>
        <div class="box_heure">
            <div id="heure">00</div>
            <span id="heure_label">Heures</span>
        </div>
        <div class="box_minute">
            <div id="minute">00</div>
            <span id="minute_label">Minutes</span>
        </div>
        <div class="box_seconde">
            <div id="seconde">00</div>
            <span id="seconde_label">Secondes</span>
        </div>
    </div>
</body>
</html>

Nos règles de style se trouvent dans la partie head de notre fichier HTML. Nous obtenons alors ce rendu dans le navigateur :

Rentrons dans le vif du sujet en écrivant notre code javascript.
Le principe est simple: il s’agit d’exécuter une fonction une fois le document chargé. Nous définissons une date de départ qui sera la date actuelle et une date de fin qui sera dans notre exemple ici la fin d’année 2021 donc 31 décembre 2021 à 23h:59mn:59sec. Nous faisons la différence entre ces deux dates et c’est sur la différence que nous allons extraire le nombre de jours, heures, minutes et secondes avant la date dans le futur.

Dans un premier temps, nous allons créer nos variables: 

function reboursF()
{
    let rebours = document.getElementById("rebours"),
        jour = document.getElementById("jour"),
        jour_label = document.getElementById("jour_label"),
        heure = document.getElementById("heure"),
        heure_label = document.getElementById("heure_label"),
        minute = document.getElementById("minute"),
        minute_label = document.getElementById("minute_label"),
        seconde = document.getElementById("seconde"),
        seconde_label = document.getElementById("seconde_label"),
        maintenant = new Date(),
        finannee = new Date('December 31, 2021 23:59:59');
}

De la ligne 3 à la ligne 11, nous avons juste cibler nos éléments HTML sur lesquels nous allons agir. la ligne 12 représente la date actuelle et la ligne 13, la date futur. Pour définir et savoir tout ce qu’il faut sur les dates en javascript, lisez la documentation.

En faisant la différence entre ces deux dates, nous obtenons un résultat en millisecondes. pour l’avoir en secondes, vous l’aurez compris, on va diviser ce nombre par 1000 car 1 milliseconde = 1000 secondes.

let total_secondes = (finannee - maintenant) / 1000;

Avant de faire nos calculs, nous allons prendre en compte le cas où le nombre de secondes est positif donc supérieur à 0.

if (total_secondes > 0){
    // nos traitements
}

Maintenant que nous avons le nombre de secondes, nous pouvons maintenant chercher à savoir combien de jours, heures, minutes et secondes que ce nombre contient.
la règle est simple :

  • 1 minute = 60 secondes
  • 1 heure = 60*60 secondes
  • 1 jour = 60*60*24 secondes

A partir de ceci, nous pouvons alors extraire aisément le plus grand qui est le nombre de jours en faisant le total de secondes divisé par ce qui représente 1 jour en secondes et nous allons prendre le plus grand entier inférieur avec la fonction Math.floor :

let nb_jours = Math.floor(total_secondes / (60 * 60 * 24));

Pour obtenir les heures, rien de plus simple, nous allons retrancher le nombre de jours trouvés du total et divisé le reste par ce qui représente 1 heure en secondes et appliquer une fois encore la fonction Math.floor :

let nb_heures = Math.floor((total_secondes - (nb_jours * 60 * 60 * 24)) / (60 * 60));

Pour les minutes et secondes, on suit la même logique et nous avons :

/* on retranche les jours et heures et on divise le reste par 60 */
let nb_minutes = Math.floor((total_secondes - ((nb_jours * 60 * 60 * 24 + nb_heures * 60 * 60))) / 60);

/* on retranche les jours, heures et minutes et ce qui reste représente les secondes */
let nb_secondes = Math.floor(total_secondes - ((nb_jours * 60 * 60 * 24 + nb_heures * 60 * 60 + nb_minutes * 60)));

Maintenant que nous avons nos valeurs, nous allons deux petits trucs. Le premier est d’avoir toujours un nombre à 2 chiffres même quand le calcul nous retourne 9 par exemple. Nous voulons plutôt 09 ou 06, …
Le deuxième truc est d’enlever les « s » aux libellés lorsque la valeur est inférieur à 2 par exemple 1 jour, 1 heure, 1 minute ou 1 seconde.
Pour cela, nous allons écrire deux petites fonctions :

Fonction pour gérer le nombre de chiffre dans un nombre.
On lui donne juste la valeur en paramètre et si c’est inférieur à 10, il rajoute un « 0 » avant. On utilise l’opérateur ternaire : 

function caractere(nb)
{ 
    return (nb < 10) ? '0'+nb : nb;
}

Fonction pour gérer le pluriel/singulier.
On lui donne juste la valeur et le libellé en paramètre et si la valeur est supérieur à 1, il rajoute un « s » à la fin du libellé :

function genre(nb, libelle)
{
    return (nb > 1) ? libelle+'s' : libelle;
}

Il nous suffit maintenant d’attribuer les valeurs à nos éléments HTML :

jour.textContent = caractere(nb_jours);
heure.textContent = caractere(nb_heures);
minute.textContent = caractere(nb_minutes);
seconde.textContent = caractere(nb_secondes);

jour_label.textContent = genre(nb_jours, 'jour');
heure_label.textContent = genre(nb_heures, 'heure');
minute_label.textContent = genre(nb_minutes, 'minute');
seconde_label.textContent = genre(nb_secondes, 'seconde');

Pour finir, nous allons ajouter à la fin de notre fonction un minuteur qui va exécuter notre fonction ) chaque seconde : 

let minuteur = setTimeout("reboursF();", 1000);

Le délai doit être exprimé en millisecondes voilà pourquoi nous avons mis 1000 pour dire 1 seconde. Par exemple 5000 voudra dire à chaque 5 secondes.
A la fin on l’appelle juste la fonction et c’est tout.

Voilà tout le code : 

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript : Compte à rebours</title>

    <style>
        body{ 
            margin:0; 
        }
        .box-rebours{ 
            height: 100vh; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            text-align: center; 
        }
        .box_jour, .box_heure, .box_minute, .box_seconde { 
            padding: 10px; 
        }
        #jour, #heure, #minute, #seconde { 
            background:black; 
            padding: 10px 20px; 
            color: white; 
            font-size: 3rem; 
            font-weight: bold; 
        }
        #jour_label, #heure_label, #minute_label, #seconde_label { 
            font-size: 1.5rem; 
        }
    </style>
</head>
<body>
    <div class="box-rebours">        
        <div class="box_jour">
            <div id="jour">00</div>
            <span id="jour_label">Jours</span>
        </div>
        <div class="box_heure">
            <div id="heure">00</div>
            <span id="heure_label">Heures</span>
        </div>
        <div class="box_minute">
            <div id="minute">00</div>
            <span id="minute_label">Minutes</span>
        </div>
        <div class="box_seconde">
            <div id="seconde">00</div>
            <span id="seconde_label">Secondes</span>
        </div>
    </div>

    <script type="text/javascript">
        function reboursF()
        {
            let rebours = document.getElementById("rebours"),
                jour = document.getElementById("jour"),
                jour_label = document.getElementById("jour_label"),
                heure = document.getElementById("heure"),
                heure_label = document.getElementById("heure_label"),
                minute = document.getElementById("minute"),
                minute_label = document.getElementById("minute_label"),
                seconde = document.getElementById("seconde"),
                seconde_label = document.getElementById("seconde_label"),
                maintenant = new Date(),
                finannee = new Date('December 31, 2021 23:59:59');

            let total_secondes = (finannee - maintenant) / 1000;
            
            if (total_secondes > 0)
            {
                let nb_jours = Math.floor(total_secondes / (60 * 60 * 24));
                let nb_heures = Math.floor((total_secondes - (nb_jours * 60 * 60 * 24)) / (60 * 60));
                let nb_minutes = Math.floor((total_secondes - ((nb_jours * 60 * 60 * 24 + nb_heures * 60 * 60))) / 60);
                let nb_secondes = Math.floor(total_secondes - ((nb_jours * 60 * 60 * 24 + nb_heures * 60 * 60 + nb_minutes * 60)));

                jour.textContent = caractere(nb_jours);
                heure.textContent = caractere(nb_heures);
                minute.textContent = caractere(nb_minutes);
                seconde.textContent = caractere(nb_secondes);

                jour_label.textContent = genre(nb_jours, 'jour');
                heure_label.textContent = genre(nb_heures, 'heure');
                minute_label.textContent = genre(nb_minutes, 'minute');
                seconde_label.textContent = genre(nb_secondes, 'seconde');        
            }

            let minuteur = setTimeout("reboursF();", 1000);
        }

        function genre(nb, libelle)
        {
            return (nb > 1) ? libelle+'s' : libelle;
        }

        function caractere(nb)
        {
            return (nb < 10) ? '0'+nb : nb;
        }

        reboursF();
    </script>
</body>
</html>

Vous pouvez visualiser la demo ici :

Compte à rebours en javascript

2 réactions sur “ Javascript : créer un compte à rebours ”

Laisser un commentaire