Maison > Article > interface Web > Comment créer un compteur de minuterie avec HTML, CSS et Javascript.

Comment créer un compteur de minuterie avec HTML, CSS et Javascript.

Mary-Kate Olsenoriginal: 2024-10-10 11:13:301098parcourir

How to create timer Counter with Html, Css, and Javascript.

Construire un compteur de minuterie est un excellent moyen de comprendre l'interaction entre HTML, CSS et JavaScript. Cet article vous guidera tout au long du processus de création d'un minuteur simple qui commence à compter lorsqu'un utilisateur clique sur un bouton. La minuterie affichera le temps écoulé en heures, minutes et secondes.

Étape 1 : Structure HTML

Commencez par créer la structure HTML de base. Vous avez besoin d'un div pour afficher la minuterie et d'un bouton pour la démarrer. Voici un exemple :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timer Counter</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Timer Counter</h1>
        <div id="timer">00:00:00</div>
        <button id="startButton">Start Timer</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

Dans ce fichier HTML :

Un div avec id="timer" est utilisé pour afficher le minuteur.
Un bouton avec id="start Button" est utilisé pour démarrer le chronomètre.

Étape 2 : Style CSS

Ensuite, stylisez les éléments HTML pour créer une interface visuellement attrayante. N'hésitez pas à le styliser à votre guise.

/* styles.css */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.container {
    text-align: center;
}

#timer {
    font-size: 3rem;
    margin-bottom: 20px;
}

button {
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
}

Ce fichier CSS :

Centre le contenu verticalement et horizontalement.
Stylise l'affichage de la minuterie avec une grande taille de police.
Ajoute un remplissage et un style au bouton pour le rendre plus cliquable.

Étape 3 : Logique JavaScript

Enfin, ajoutez le JavaScript pour gérer la fonctionnalité de minuterie. Cela inclut le démarrage de la minuterie, sa mise à jour toutes les secondes et l'affichage du temps écoulé.

// script.js
document.addEventListener("DOMContentLoaded", () => {
    const startButton = document.getElementById("startButton");
    const timerDisplay = document.getElementById("timer");
    let timerInterval;
    let startTime;

    function startTimer() {
        startTime = new Date();
        timerInterval = setInterval(updateTimer, 1000);
    }

    function updateTimer() {
        const currentTime = new Date();
        const elapsedTime = new Date(currentTime - startTime);

        const hours = String(elapsedTime.getUTCHours()).padStart(2, '0');
        const minutes = String(elapsedTime.getUTCMinutes()).padStart(2, '0');
        const seconds = String(elapsedTime.getUTCSeconds()).padStart(2, '0');

        timerDisplay.textContent = `${hours}:${minutes}:${seconds}`;
    }

    startButton.addEventListener("click", startTimer);
});

Ce fichier JavaScript :

Attend que le DOM se charge avant de s'exécuter.
Définit la fonction startTimer pour initialiser l'heure de début et définir un
intervalle pour mettre à jour la minuterie toutes les secondes.
Définit la fonction updateTimer pour calculer le temps écoulé, format
et mettez à jour l'affichage de la minuterie.
Ajoute un écouteur d'événement au bouton pour démarrer le minuteur lorsque vous cliquez dessus.

Bonus :

Masquer le bouton de démarrage et afficher un script de bouton d'arrêt

// script.js
document.addEventListener("DOMContentLoaded", () => {
    const startButton = document.getElementById("startButton");
    const stopButton = document.getElementById("stopButton");
    const timerDisplay = document.getElementById("timer");
    let timerInterval;
    let startTime;

    function startTimer() {
        startTime = new Date();
        timerInterval = setInterval(updateTimer, 1000);
        startButton.style.display = "none";
        stopButton.style.display = "inline-block";
    }

    function stopTimer() {
        clearInterval(timerInterval);
        startButton.style.display = "inline-block";
        stopButton.style.display = "none";
    }

    function updateTimer() {
        const currentTime = new Date();
        const elapsedTime = new Date(currentTime - startTime);

        const hours = String(elapsedTime.getUTCHours()).padStart(2, '0');
        const minutes = String(elapsedTime.getUTCMinutes()).padStart(2, '0');
        const seconds = String(elapsedTime.getUTCSeconds()).padStart(2, '0');

        timerDisplay.textContent = `${hours}:${minutes}:${seconds}`;
    }

    startButton.addEventListener("click", startTimer);
    stopButton.addEventListener("click", stopTimer);
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html for format Interface finally Event function dom this display padding

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Création d'une disposition de grille réactive avec Tailwind CSSArticle suivant：Création d'une disposition de grille réactive avec Tailwind CSS

Articles Liés

Voir plus