So stellen Sie einen Timer mit HTML ein

So stellen Sie einen Timer mit HTML ein: Erstellen Sie zunächst eine neue HTML-Seite, binden Sie dann eine Funktion an die Schaltfläche und schreiben Sie schließlich den Implementierungscode in die Funktion.

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5 und Javascript Version 1.8.5, Dell G3-Computer.

Erstellen Sie eine neue HTML-Seite, legen Sie dann eine Schaltfläche fest und binden Sie eine Funktion an diese Schaltfläche. Stellen Sie beispielsweise einen Funktionstimer ein.

Was wir jetzt tun müssen, ist ein Countdown-Timer. Angenommen, die Countdown-Zeit beträgt 5 Sekunden, also müssen wir eine Variable festlegen, um die Sekunden zu speichern. Und wir müssen auch das Button-Element bekommen.

Legen Sie wie im Bild gezeigt eine Variable fest, um den Timer zu speichern. setInterval ist die Timer-Funktion. Der erste ist die Funktion und der zweite ist die Zeit, die function() alle 1000 Millisekunden aufgerufen werden soll.

Beginnen Sie dann mit dem Schreiben von Code in der Funktion. Stellen Sie zunächst fest, ob s kleiner als 0 ist, da der von mir erstellte Timer mit dem Countdown ab 5 Sekunden beginnt. Wenn er kleiner als 0 ist, wird eine negative Zahl angezeigt Sie müssen feststellen, ob es kleiner als 0 ist. Wenn es kleiner als 0 ist, löschen Sie den Timer, ändern Sie den Inhalt der Schaltfläche und machen Sie die Schaltfläche verfügbar.

Wenn es nicht kleiner als 0 ist, ändern Sie den Inhalt der Schaltfläche, subtrahieren Sie 1 von der Zeit und machen Sie die Schaltfläche nicht verfügbar.

Nachdem der Countdown-Timer abgelaufen ist, ist der erste Effekt wie in der Abbildung dargestellt. Zu diesem Zeitpunkt ist die Farbe der Schaltfläche relativ hell, was darauf hinweist, dass die Schaltfläche anklickbar ist und der Text darin „Senden“ lautet. .

Und wenn wir auf die Schaltfläche klicken, beginnt ein Countdown von fünf Sekunden. Zu diesem Zeitpunkt ändert sich der Schaltflächentext und die Schaltfläche befindet sich in einem nicht anklickbaren Zustand. Nachdem der Countdown abgelaufen ist, wechselt die Schaltfläche zu Schritt 6. Wenn Sie erneut darauf klicken, wird der Zyklus erneut durchlaufen.

Empfohlen: „js Basis-Tutorial“ „HTML-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonSo stellen Sie einen Timer mit HTML ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!