Comment créer un compteur de minuterie avec HTML, CSS et Javascript.-tutoriel CSS-php.cn

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

Mary-Kate Olsen

Libérer： 2024-10-10 11:13:30

original

1105 Les gens l'ont consulté

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>

Copier après la connexion

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;
}

Copier après la connexion

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);
});

Copier après la connexion

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);
});

Copier après la connexion

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!