Implementierung eines einfachen Timers in JavaScript

In diesem Artikelbeispiel wird der spezifische JavaScript-Code zur Implementierung eines einfachen Timers zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Zeitgeber</title>
    <Stil>
        .bigDiv {
            Rand: 50px automatisch;
            Breite: 200px;
            Höhe: 200px;
            Hintergrundfarbe: Hellhimmelblau;
            Rahmenradius: 10px;
        }

        #zeigeNum {
            Breite: 200px;
            Höhe: 20px;
            Hintergrundfarbe: orange;
            Textausrichtung: Alles zentriert;

            Rahmenradius: 5px;
        }
    </Stil>
</Kopf>
<Text>
<div Klasse="großesDiv">
    <h2 align="center">Zeitgeber</h2>
    <div id="AnzeigeNum" align="center">
        0
    </div>
    <br>
    <br>
    <div class="butDiv">&nbsp&nbsp&nbsp&nbsp
        <button type="button" id="start">Starten</button>
        &nbsp
        <button type="button" id="stop">Stopp</button>
        &nbsp
        <button type="button" id="reset">Zurücksetzen</button>
        &nbsp
    </div>
</div>
<Skript>
    //Angezeigte Zeit definieren let int = null;
    /**
     * Klickereignis starten */
    document.getElementById("start").addEventListener('klicken', function () {
        wenn (int == null) {
            //Timer einstellen//Alle 2 Millisekunden ausführen Parameter 1 int = setInterval(startNum, 1000);
        }
    });
    /**
     * Klickereignis stoppen */
    document.getElementById("stop").addEventListener('klicken', function () {
        // Lösche den Timer,
        Intervall löschen(int);
        int = null;
    });
    /**
     * Klickereignis zurücksetzen */
    sei num = 0;
    document.getElementById("reset").addEventListener('klicken', function () {
        wenn (int == null) {
            Zahl = 0;
            //Ändere die Zeit auf 0
            document.getElementById("showNum").innerHTML = Zahl;
        }
    });

    Funktion Startnummer() {
        Zahl++;
        //Zeit kontinuierlich ändern document.getElementById("showNum").innerHTML = num;
    }
</Skript>
</body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Vue.js implementiert eine einfache Timerfunktion
JS implementiert einen Stoppuhr-Timer
JS verwendet den setInterval-Timer, um die 10-Sekunden-Challenge zu implementieren
JavaScript implementiert einen gut aussehenden Stoppuhr-Timer
JavaScript setInterval() vs setTimeout() Timer
js implementiert integrierten Timer
Detaillierte Erklärung der JavaScript-Timer- und Button-Effekt-Einstellungen

<<: Erklärung zur Verwendung von „Ersetzen“ und „Ersetzen in“ in MySQL

>>: So erstellen Sie MySQL-Indizes richtig