JavaScript zum Erzielen eines Digitaluhreffekts

In diesem Artikelbeispiel wird der spezifische JavaScript-Code zur Erzielung des Digitaluhreffekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Rendern

Bedarfsanalyse

1. Uhrzeit bis Datum ermitteln
2. Zeit dynamisch über den Intervalltimer setInterval abrufen
3. Stellen Sie das Intervall des Intervalltimers setInterval auf 1000 Millisekunden (1 Sekunde) ein, um die Zeit einmal zu erhalten
4. Für einen ansprechenden Stil verwenden wir digitale Bilder anstelle von Zahlen.

Quellcode

HTML-Teil

<div id="div">
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 Sekunden</div>

CSS-Teil

<Stil>
/*keiner*/ 
</Stil>

JavaScript

<Skript>
 // Anforderung: Digitaluhr var date = new Date();
 var imgArr = document.getElementsByTagName('img'); //Eine Sammlung von img-Bildern abrufen var Stunden, Minuten, Sekunden;
 var Zeit = setzeIntervall(Funktion () {
 Datum = neues Datum();
 // Stunden abrufen hours = date.getHours();
 
 imgArr[0].src = "img/" + parseInt(Stunden / 10) + ".png"
 imgArr[1].src = "img/" + Stunden % 10 + ".png"
 // Minuten abrufen minutes = date.getMinutes();
 imgArr[2].src = "img/" + parseInt(Minuten / 10) + ".png"
 imgArr[3].src = "img/" + Minuten % 10 + ".png"
 // Sekunden abrufen seconds = date.getSeconds();
 imgArr[4].src = "img/" + parseInt(Sekunden / 10) + ".png"
 imgArr[5].src = "img/" + Sekunden % 10 + ".png"
 console.log(Stunden);
 console.log(Minuten);
 console.log(Sekunden);
 }, 1000)
</Skript>

Gesamtcode

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
 <title>Dokument</title>
</Kopf>
<Text>
 <div id="div">
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 <img src="img/0.png" />
 Sekunden</div>
</body>

</html>
<Skript>
 // Anforderung: Digitaluhr var date = new Date();
 var imgArr = document.getElementsByTagName('img'); //Eine Sammlung von img-Bildern abrufen var Stunden, Minuten, Sekunden;
 var Zeit = setzeIntervall(Funktion () {
 Datum = neues Datum();
 // Stunden abrufen hours = date.getHours();
 
 imgArr[0].src = "img/" + parseInt(Stunden / 10) + ".png"
 imgArr[1].src = "img/" + Stunden % 10 + ".png"
 // Minuten abrufen minutes = date.getMinutes();
 imgArr[2].src = "img/" + parseInt(Minuten / 10) + ".png"
 imgArr[3].src = "img/" + Minuten % 10 + ".png"
 // Sekunden abrufen seconds = date.getSeconds();
 imgArr[4].src = "img/" + parseInt(Sekunden / 10) + ".png"
 imgArr[5].src = "img/" + Sekunden % 10 + ".png"
 }, 1000)
</Skript>

Verwendete Bilder:

Da Sie keine Bilder haben, wird der Effekt beim direkten Kopieren des Codes nicht angezeigt. Sie können einige Bilder finden, um sie zu ersetzen und leicht zu ändern. Solange Sie den Code verstehen, ist das Ändern kein Problem.

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 ein Beispiel für eine Digitaluhrfunktion mit Datum und Woche
JS+CSS, um einen scrollenden Digitaluhreffekt zu erzielen
js realisiert einen einfachen Digitaluhreffekt
Verwenden Sie JS, um den Countdown-Digitaluhreffekt anzuzeigen
Beispiel einer JavaScript-Digitaluhr zum Erzielen eines Scroll-Effekts
JS realisiert den Countdown-Digitaluhr-Effekt [mit Beispielcode]
Von JS implementierter Digitaluhreffekt für den Countdown der Webseite
Freigabe eines Beispiels für eine JavaScript-Digitaluhr
HTML5 Canvas js (Digitaluhr) Beispielcode
JavaScript zum Implementieren einer dynamischen Digitaluhr

<<: Detaillierte Erläuterung der CentOS-Konfiguration der offiziellen Nginx-Yum-Quelle

>>: 4 Möglichkeiten, sich schnell Linux-Befehle selbst beizubringen

Detaillierte Erklärung zur Verwendung der ziehbaren Textfeldkomponente von Vue.js

JavaScript zum Erzielen eines Digitaluhreffekts

Rendern

Bedarfsanalyse

Quellcode

Detaillierte Erklärung zur Verwendung der ziehbaren Textfeldkomponente von Vue.js

11 allgemeine CSS Tipps und Erfahrungssammlung

Eine einfache Möglichkeit, mit dem HTML-Tag „Marquee“ einen Scroll-Effekt zu erzielen (unbedingt lesen)

base target="" steuert den Ziel-Open-Frame des Links

Lösungen zum Erstellen von Ping und NFS in einer eingebetteten Linux-Entwicklungsumgebung

MySQL-Installationstutorial unter Centos7

So implementieren Sie mit MyCat die Lese-/Schreibtrennung von MySQL-Master und -Slave unter Linux

Analyse des Prinzips des Rabbitmq Heartbea-Herzschlagerkennungsmechanismus

Analyse des Prozesses der einfachen Bereitstellung von Nginx im Docker-Container

Detaillierte Erklärung zur Verwendung der Vue h-Funktion

Artikel empfehlen

So implementieren Sie „insert if none“ und „update if yes“ in MySql

Verwendung des Linux-Befehls „cal“

Zusammenfassung der Verwendung des CSS-Bereichs (Stilaufteilung)

So ändern Sie den Punkt im WeChat-Applet Swiper-Dot in einen Slider

Zusammenfassung gängiger Befehle in Dockerfile

CSS realisiert Div vollständig zentriert, ohne Höhe festzulegen

Vue-Kapselungskomponente Bildkomponente hochladen

Grafisches Tutorial zur Installation von MySQL 5.5.27

Eine kurze Diskussion über das Prinzip der Anmeldung durch Scannen von js-QR-Codes

Zusammenfassung der Methoden zum Abfragen von MySQL-Benutzerberechtigungen

Detaillierte Erläuterung der Vue-Projektoptimierung und -verpackung

Detaillierte Erläuterung der Verwendung von binlog2sql zum schnellen Rollback nach einem MySQL-Fehler

Zwei Möglichkeiten zum Exportieren von CSV in Win10 MySQL

Implementierung von Linux-Dateisystemvorgängen

Was bedeutet Eingabetyp und wie kann die Eingabe begrenzt werden?