×

Créer une horloge digitale en HTML et JavaScript (Débutant)

Astuces & tutoriels Blog Html/css JavaScript , ,

Créer une horloge digitale en HTML et JavaScript (Débutant)

Créer une horloge digitale est un excellent exercice pour apprendre à manipuler le temps, les fonctions JavaScript et le DOM.
Dans ce tutoriel, nous allons créer une horloge qui affiche l’heure en temps réel.

Prérequis

  • Bases en HTML
  • Bases en JavaScript
  • Un navigateur web

Structure HTML de l’horloge

Voici le code HTML complet :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Horloge Digitale JavaScript</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            background: #0f172a;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .horloge {
            background: #020617;
            padding: 30px 50px;
            border-radius: 10px;
            font-size: 40px;
            letter-spacing: 3px;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>

<div class="horloge" id="horloge">
    00:00:00
</div>

Le code JavaScript

Ajoute ce script avant </body> :

<script>
    function afficherHeure() {
        let maintenant = new Date();

        let heures = maintenant.getHours();
        let minutes = maintenant.getMinutes();
        let secondes = maintenant.getSeconds();

        // Ajouter un 0 devant si inférieur à 10
        heures = heures < 10 ? "0" + heures : heures;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        secondes = secondes < 10 ? "0" + secondes : secondes;

        let heureComplete = heures + ":" + minutes + ":" + secondes;

        document.getElementById("horloge").innerHTML = heureComplete;
    }

    // Mettre à jour l'heure chaque seconde
    setInterval(afficherHeure, 1000);

    // Afficher l'heure immédiatement au chargement
    afficherHeure();
</script>

</body>
</html>

Explication du code

🔹 new Date()

Permet de récupérer la date et l’heure actuelle.

🔹 getHours(), getMinutes(), getSeconds()

Récupèrent l’heure, les minutes et les secondes.

🔹 setInterval()

Exécute la fonction toutes les 1000 ms (1 seconde).

Résultat final

⏱️ L’horloge affiche l’heure :

14:35:08

et se met à jour automatiquement chaque seconde.

Tu peux améliorer cette horloge en :

  • Ajoutant la date complète
  • Créant une horloge 12h / AM – PM
  • Ajoutant une animation
  • Changeant le thème clair / sombre

Cette horloge digitale est parfaite pour :

  • Comprendre la gestion du temps en JavaScript
  • Apprendre les intervalles
  • Créer un mini-projet utile
Étiquette

Related Posts

You May Have Missed