Un compte à rebours pour son site internet – 2D Online

Pour créer un compte à rebours sur votre site internet, vous pouvez utiliser une combinaison de HTML, CSS, et JavaScript. Voici une méthode simple pour créer un compte à rebours qui affiche les jours, heures, minutes et secondes restant jusqu’à une date spécifique.

Étape 1 : Le fichier HTML

Dans votre fichier HTML, vous définirez une section où le compte à rebours sera affiché.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Compte à rebours</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="compte-a-rebours">
        <h1>Événement dans :</h1>
        <div id="timer">
            <span id="jours"></span> jours
            <span id="heures"></span> heures
            <span id="minutes"></span> minutes
            <span id="secondes"></span> secondes
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Étape 2 : Le fichier CSS

Vous pouvez personnaliser l’apparence du compte à rebours avec un fichier CSS pour styliser votre page.

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f4;
}

#compte-a-rebours {
    text-align: center;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#timer {
    font-size: 2em;
}

#timer span {
    font-weight: bold;
}

Étape 3 : Le fichier JavaScript

Le cœur du compte à rebours se trouve dans le fichier JavaScript qui calcule le temps restant et met à jour l’affichage en temps réel.

// Sélectionnez la date de fin du compte à rebours
const dateCible = new Date("Dec 31, 2024 23:59:59").getTime();

// Mettre à jour le compte à rebours toutes les secondes
const interval = setInterval(() => {
    const maintenant = new Date().getTime();

    // Calcul du temps restant
    const tempsRestant = dateCible - maintenant;

    // Calcul des jours, heures, minutes et secondes
    const jours = Math.floor(tempsRestant / (1000 * 60 * 60 * 24));
    const heures = Math.floor((tempsRestant % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((tempsRestant % (1000 * 60 * 60)) / (1000 * 60));
    const secondes = Math.floor((tempsRestant % (1000 * 60)) / 1000);

    // Affichez le résultat dans les éléments HTML correspondants
    document.getElementById("jours").innerHTML = jours;
    document.getElementById("heures").innerHTML = heures;
    document.getElementById("minutes").innerHTML = minutes;
    document.getElementById("secondes").innerHTML = secondes;

    // Si le compte à rebours est terminé
    if (tempsRestant < 0) {
        clearInterval(interval);
        document.getElementById("timer").innerHTML = "L'événement a commencé !";
    }
}, 1000);

Explication du code :

HTML : Vous créez la structure de base pour afficher les jours, heures, minutes et secondes restants.
CSS : Vous ajoutez des styles pour rendre le compte à rebours plus attrayant visuellement.
JavaScript : Vous configurez un calcul dynamique du temps restant à l’aide de setInterval. Si le compte à rebours atteint zéro, un message s’affichera.

Résultat :

Ce compte à rebours se mettra à jour automatiquement chaque seconde pour afficher le temps restant jusqu’à la date et l’heure définies dans le fichier JavaScript.

Vous pouvez modifier la date cible dans le fichier JavaScript pour l’adapter à votre événement.

Image by freepik