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">    
<button type="button" id="start">Starten</button>
 
<button type="button" id="stop">Stopp</button>
 
<button type="button" id="reset">Zurücksetzen</button>
 
</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:
|
<<: Erklärung zur Verwendung von „Ersetzen“ und „Ersetzen in“ in MySQL
>>: So erstellen Sie MySQL-Indizes richtig
Artikel empfehlen
Verwenden Sie Javascript, um die Funktion zum Senden des SMS-Bestätigungscodeintervalls zu implementieren
Wenn wir uns in vielen Apps und Websites anmelden...
MySQL-Grundlagen - Kurzanleitung - Wissenszusammenfassung (mit Mindmap)
Inhaltsverzeichnis Vorwort 1. Grundkenntnisse der...
Codebeispiele für den Import und Export von Docker-Images
Import und Export von Docker-Images Dieser Artike...
Beschreiben Sie kurz die Installation der verteilten Zeitreihendatenbank influxDB und die zugehörigen Vorgänge in Docker
Einführung in influxDB influxDB ist eine verteilt...
Einführung in das MySQL Connection Control Plugin
Inhaltsverzeichnis 1. Einführung in das Verbindun...
Eine detaillierte Einführung in den wget-Befehl in Linux
Inhaltsverzeichnis Installieren Sie zuerst wget H...
Detaillierte Beschreibung der Funktion von new in JS
Inhaltsverzeichnis 1. Beispiel 2. Erstelle 100 So...
Einigen Eigenschaften in CSS geht ein "*" oder "_" voraus.
Einigen Eigenschaften in CSS geht ein "*&quo...
Detaillierte Erklärung der Verwendung von Reduce Fold Unfold in JS
Inhaltsverzeichnis falten (reduzieren) Verwenden ...
Beispiele für 4 Methoden zum Einfügen großer Datenmengen in MySQL
Vorwort Dieser Artikel stellt hauptsächlich 4 Met...
Vor- und Nachteile gängiger MySQL-Speicher-Engines
Inhaltsverzeichnis Alle Speicher-Engines anzeigen...
In diesem Artikel erfahren Sie mehr über NULL in MySQL
Inhaltsverzeichnis Vorwort NULL in MySQL 2 NULL b...
Detaillierte Analyse der SQL-Ausführungsschritte
Detaillierte Analyse der SQL-Ausführungsschritte ...
Detaillierte Erklärung zur Konfiguration des sekundären Domänennamens auf einem Apache-Server in einer Linux-Umgebung
Dieser Artikel beschreibt, wie Sie einen sekundär...
Nginx-Konfiguration: Trennung von PC-Site und mobiler Site zur Realisierung der Umleitung
Verwenden Sie nginx, um die Trennung von PC-Site ...