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
Eine detaillierte Analyse und Verarbeitung von MySQL-Alarmen
Vor kurzem hat ein Dienst einen Alarm ausgelöst, ...
Eine kurze Diskussion über die Ungültigkeitserklärung oder implizite Konvertierung von MySQL-Integer- und String-Indizes
Inhaltsverzeichnis Problemübersicht Reproduktion ...
Aufzeichnungen zur Verwendung von SSH-Befehlen unter Windows 8
1. Öffnen Sie die virtuelle Maschine und das Git-...
Lösen Sie schnell das Problem des langsamen Tomcat-Starts, super einfach
Heute habe ich einem Klassenkameraden geholfen, e...
Erfahren Sie, wie Sie den Zabbix-Dienst auf Saltstack bereitstellen
Inhaltsverzeichnis Saltstack stellt Zabbix-Dienst...
Util-Modul im node.js-Tutorial-Beispiel – detaillierte Erklärung
Inhaltsverzeichnis Ausgehend von der Typbeurteilu...
Greifen Sie auf die MySQL-Datenbank zu, indem Sie unter Windows über cmd das DOS-Fenster aufrufen
1. Drücken Sie Win + R und geben Sie cmd ein, um ...
Lösung für Ubuntu 18.04, das keine Verbindung zum Netzwerk in der virtuellen VMware-Maschine herstellen kann
Die Lösung für das Problem, dass Ubuntu 18.04 in ...
Verwendung von CSS-Animationseigenschaften und Beispielcode (Übergang/Transformation/Animation)
Während der Entwicklung wird eine gute Benutzerob...
So installieren Sie Composer unter Linux
1. Laden Sie das Installationsskript - composer-s...
Neun erweiterte Methoden zur Deduplizierung von JS-Arrays (erprobt und effektiv)
Vorwort Die allgemeinen Methoden sind hier nicht ...
So implementieren Sie verschiebbare Komponenten in Vue
In diesem Artikel erfahren Sie, wie Sie ziehbare ...
MySQL umgeht die Gewährung von information_schema-Objekten und meldet den Fehler ERROR 1044 (4200)
Diese Frage ist eine Diskussion unter Internetnut...
Detaillierte Erklärung der Schleifenverwendung in Javascript-Beispielen
Aus Langeweile habe ich ein paar einfache Übungen...
CSS-Hacks \9 und \0 funktionieren möglicherweise nicht zum Hacken von IE11\IE9\IE8
Jedes Mal, wenn ich eine Webseite oder ein Formul...