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

Grafisches Tutorial zur Installations- und Konfigurationsmethode von Mysql5.7.14 (Lösung für Passwortprobleme)

JavaScript zum Erzielen eines Digitaluhreffekts

Rendern

Bedarfsanalyse

Quellcode

Grafisches Tutorial zur Installations- und Konfigurationsmethode von Mysql5.7.14 (Lösung für Passwortprobleme)

Detaillierte Erläuterung des MySQL Workbench-Nutzungs-Tutorials

Einfaches Beispiel für HTML-Textformatierung (ausführliche Erklärung)

Konfiguration des SSL-Zertifikats für den Nginx-Domänennamen (Website-HTTP auf https aktualisiert)

Mit Mailto ist das Senden von E-Mails im HTML-Format ganz einfach

Einfacher Webseitencode, der im NetEase-Blog verwendet wird

Was Sie über die automatische ID-Inkrementierung in MySQL wissen müssen

Implementierungsprinzip und Skriptcode der HTML-Rabattpreisberechnung

Responsive Layout-Zusammenfassung (empfohlen)

So verhindern Sie eine Verlangsamung des Computers, wenn unter WIN10 mehrere Datenbanken installiert sind

Artikel empfehlen

Einfaches Verständnis und Beispiele für MySQL Index Pushdown (ICP)

Detaillierte Erläuterung der MySQL-Protokoll- und Sicherungs- und Wiederherstellungsprobleme

Auszeichnungssprachen – Was lernen, nachdem man HTML gelernt hat?

Detaillierte Erläuterung der gespeicherten Prozeduren und Funktionen von MySQL

Docker implementiert hostübergreifende Containerkommunikation basierend auf MacVLAN

Führt das Laden von CSS zu einer Blockierung?

So verbinden Sie Django 2.2 mit einer MySQL-Datenbank

Eine kurze Erläuterung der Rolle des Parameters docker --privileged=true

Detaillierte Erklärung des Json-Formats

H-Tags sollten bei der Erstellung von Webseiten sinnvoll verwendet werden

js, um die Rotation von Webseitenbildern zu realisieren

Implementierung von MySQL-indexbasierten Stresstests

Navicat Premium betreibt MySQL-Datenbank (führt SQL-Anweisungen aus)

JavaScript zum Erzielen eines Kalendereffekts

Zabbix benutzerdefinierte Überwachung Nginx Status Implementierungsprozess