JS implementiert einen Stoppuhr-Timer

In diesem Artikelbeispiel wird der spezifische JS-Code zur Implementierung des Stoppuhr-Timers zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Implementierung des Stoppuhr-Timers:

Das Wirkungsdiagramm sieht wie folgt aus:

Angehängter Code, debuggt und ausgeführt

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Dokument</title>
  <Stil>
    #div1 {
      Breite: 300px;
      Höhe: 400px;
      Hintergrund: himmelblau;
      Rand: 100px automatisch;
      Textausrichtung: zentriert;
    }
    
    #zählen {
      Breite: 200px;
      Höhe: 150px;
      Zeilenhöhe: 150px;
      Rand: automatisch;
      Schriftgröße: 40px;
    }
    
    #div1 Eingabe {
      Breite: 150px;
      Höhe: 40px;
      Hintergrund: orange;
      Schriftgröße: 25px;
      Rand oben: 20px
    }
  </Stil>
</Kopf>

<Text>
  <div id="div1">
    <div id="Anzahl">
      <span id="id_H">00</span>
      <span id="id_M">00</span>
      <span id="id_S">00</span>
    </div>
    <input id="start" type="button" value="Start">
    <input id="pause" type="button" value="Pause">
    <input id="stop" type="button" value="Stopp">
  </div>
  <Skript>
    //Sie können den Vorgang zum Suchen von Label-Knoten vereinfachen var btn = getElementById('btn')
    Funktion $(id) {
      gibt document.getElementById(id) zurück
    }
    fenster.onload = funktion() {
      //Klicken Sie, um mit dem Erstellen und Zählen zu beginnen. var count = 0
      var timer = null //Die Timervariable zeichnet den Rückgabewert des Timers auf setInterval $("start").onclick = function() {
        Timer = Intervall setzen(Funktion() {
          zählen++;
          console.log(Anzahl)
            // Die Werte für Stunden, Minuten und Sekunden müssen auf der Seite geändert werden console.log($("id_S"))
          $("id_S").innerHTML = showNum(Anzahl % 60)
          $("id_M").innerHTML = showNum(parseInt(Anzahl / 60) % 60)
          $("id_H").innerHTML = showNum(parseInt(Anzahl / 60 / 60))
        }, 1000)
      }
      $("pause").onclick = funktion() {
          //Den Timer abbrechen clearInterval(timer)
        }
        //Zählung stoppen, Daten löschen und Seitenanzeigedaten löschen$("stop").onclick = function() {
        //Den Timer abbrechen $("pause").onclick()
          // Intervall löschen (Timer)
          //Daten löschen, Gesamtanzahl der gelöschten Sekunden = 0
          // Seitenanzeigedaten gelöscht $("id_S").innerHTML = "00"
        $("id_M").innerHTML = "00"
        $("id_H").innerHTML = "00"
      }

      //Kapselung einer Funktion, die einstellige Zahlen verarbeitet function showNum(num) {
        wenn (Zahl < 10) {
          return '0' + num
        }
        Rückgabenummer
      }
    }
  </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
Implementierung eines einfachen Timers in JavaScript
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

<<: mysql5.7.18.zip – Tutorial zur Konfiguration der installationsfreien Version (Windows)

>>: Detaillierte Erklärung des Linx awk-Einführungstutorials