Heim > Artikel > Web-Frontend > So erstellen Sie einen Timer-Zähler mit HTML, CSS und Javascript.

So erstellen Sie einen Timer-Zähler mit HTML, CSS und Javascript.

Mary-Kate OlsenOriginal: 2024-10-10 11:13:30987Durchsuche

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

Das Erstellen eines Timer-Zählers ist eine großartige Möglichkeit, die Interaktion zwischen HTML, CSS und JavaScript zu verstehen. Dieser Beitrag führt Sie durch den Prozess der Erstellung eines einfachen Timers, der zu zählen beginnt, wenn ein Benutzer auf eine Schaltfläche klickt. Der Timer zeigt die verstrichene Zeit in Stunden, Minuten und Sekunden an.

Schritt 1: HTML-Struktur

Beginnen Sie mit der Erstellung der grundlegenden HTML-Struktur. Sie benötigen ein Div, um den Timer anzuzeigen, und eine Schaltfläche, um ihn zu starten. Hier ist ein Beispiel:

<!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>

In dieser HTML-Datei:

Ein Div mit der ID="timer" wird verwendet, um den Timer anzuzeigen.
Ein Button mit der ID="start Button" wird zum Starten des Timers verwendet.

Schritt 2: CSS-Styling

Als nächstes gestalten Sie die HTML-Elemente, um eine optisch ansprechende Benutzeroberfläche zu erstellen. Fühlen Sie sich frei, es nach Ihren Wünschen zu stylen.

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

Diese CSS-Datei:

Zentriert den Inhalt sowohl vertikal als auch horizontal.
Gestaltert die Timer-Anzeige mit einer großen Schriftgröße.
Fügt der Schaltfläche Polsterung und Stil hinzu, um sie klickbarer zu machen.

Schritt 3: JavaScript-Logik

Fügen Sie abschließend das JavaScript hinzu, um die Timer-Funktionalität zu verwalten. Dazu gehört das Starten des Timers, die sekündliche Aktualisierung und die Anzeige der verstrichenen Zeit.

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

Diese JavaScript-Datei:

Warten, bis das DOM geladen ist, bevor es ausgeführt wird.
Definiert die startTimer-Funktion, um die Startzeit zu initialisieren und eine festzulegen
Intervall, um den Timer jede Sekunde zu aktualisieren.
Definiert die updateTimer-Funktion zur Berechnung der verstrichenen Zeit, Format
es und aktualisieren Sie die Timer-Anzeige.
Fügt der Schaltfläche einen Ereignis-Listener hinzu, um den Timer zu starten, wenn darauf geklickt wird.

Bonus:

Verstecken Sie die Startschaltfläche und zeigen Sie ein Stoppschaltflächenskript an

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

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Timer-Zähler mit HTML, CSS und Javascript.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Erstellen eines Responsive Grid-Layouts mit Tailwind CSSNächster Artikel：Keiner

In Verbindung stehende Artikel

Mehr sehen