JS realisiert Bild Digitaluhr
|
In diesem Artikelbeispiel wird der spezifische JS-Code zur Realisierung der digitalen Bilduhr als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt Zunächst ist dies das Bild, das wir vorbereitet haben
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
</Stil>
</Kopf>
<Text>
<div>
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
<img src="img/10.png" alt="">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
<img src="img/10.png" alt="">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
</div>
<Skripttyp="text/javascript">
//Funktion Funktion get(){
//Holen Sie sich das Seiten-Bild
var img = document.getElementsByTagName('img');
//Zeit abrufen var date=new Date();
var Stunde = Datum.getHours();
var minute=date.getMinutes();
var secind=date.getSeconds();
//Füge 0 ein
wenn(Stunde<10){
Stunde='0'+Stunde;
}sonst wenn(Minute<0){
Minute='0'+Minute;
}sonst wenn (zweite) {
Sekunde='0'+Sekunde;
}
// Zeichenfolgenverkettung img[0].src='img/'+parseInt(hour/10)+'.png';
img[1].src='img/'+stunde%10+'.png';
img[3].src='img/'+parseInt(minute/10)+'.png';
img[4].src='img/'+minute%10+'.png';
img[6].src='img/'+parseInt(secind/10)+'.png';
img[7].src='img/'+secind%10+'.png';
}
erhalten();
Intervall festlegen(get,1000);
//Aufruf zum Aktualisieren jede Sekunde</script>
</body>
</html>Endgültige Umsetzung
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:
|
<<: Detaillierte Erklärung des durch einen Schrägstrich / verursachten Mordes in Nginx proxy_pass
>>: Lösung für das Problem des MySQL-Master-Slave-Switch-Kanals
Artikel empfehlen
Detaillierte Erläuterung der CentOS-Konfiguration der offiziellen Nginx-Yum-Quelle
Ich habe das von Alibaba Cloud gekaufte CentOS fü...
Detaillierte Erläuterung der Vue-Projektverpackung
Inhaltsverzeichnis 1. Zugehörige Konfiguration Fa...
CSS-Code zum Erreichen eines Hintergrundverlaufs und automatischen Vollbilds
CSS-Probleme mit dem Hintergrundverlauf und dem a...
Einige häufige Fehler mit MySQL null
Laut Nullwerten bedeutet der Wert Null in MySQL l...
JavaScript fügt Prototyp-Methodenimplementierung für integrierte Objekte hinzu
Die Reihenfolge, in der Objekte Methoden aufrufen...
MySQL-Datenbankgrundlagen - Prinzip der Join-Operation
Join verwendet den Nested-Loop-Join-Algorithmus. ...
Was Sie über MySQL-Sperren wissen müssen
1. Einleitung MySQL-Sperren können je nach Umfang...
Eine kurze Einführung in MySQL-Funktionen
Inhaltsverzeichnis 1. Mathematische Funktionen 2....
Eine einfache Möglichkeit, den CSS-, JavaScript- und Hintergrundbild-Cache im Browser zu leeren
Im eigentlichen Projektentwicklungsprozess wird di...
Die Vue-Komponentenbibliothek ElementUI realisiert den Paging-Effekt einer Tabellenliste
ElementUI implementiert das Tutorial zum Paginier...
Detaillierte Erläuterung der KVM-Bereitstellung von drei virtuellen Maschinen zur Implementierung des WordPress-Experiments
1. Einführung in KVM Die Abkürzung für Kernel-bas...
JavaScript implementiert Produktdetails der E-Commerce-Plattform
In diesem Artikel wird ein allgemeines Beispiel f...
React-Beispiel zum Abrufen des Werts aus dem Eingabefeld
Reagieren Sie auf mehrere Arten, um den Wert des ...
【HTML-Element】Detaillierte Erklärung des Tag-Textes
1. Verwenden Sie grundlegende Textelemente, um In...
Spezifische Verwendung des Linux-gcc-Befehls
01. Befehlsübersicht Der Befehl gcc verwendet den...