JavaScript zum Erzielen eines Digitaluhreffekts

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

Artikel empfehlen

Webdesign-Tutorial (3): Designschritte und Denkweise

<br />Vorheriges Tutorial: Webdesign-Tutoria...

Synology NAS verwendet Docker-Container zum Erstellen eines KMS-Aktivierungsservers zum Aktivieren des Windows-Systems und von Office (Bedienungsschritte)

Vorwort Das über KMS aktivierbare Windows-System ...

So führen Sie einen Befehl zu einem bestimmten Zeitpunkt in Linux aus

Neulich habe ich rsync verwendet, um eine große D...

Drei Möglichkeiten zum Aktualisieren von Iframes

Code kopieren Der Code lautet wie folgt: <ifra...

Detailliertes Tutorial zur Installation des Jenkins-Containers in einer Docker-Umgebung

Empfohlene Docker-Lernmaterialien: https://www.ru...

Spezifische Verwendung des Stapelkontexts in CSS

Vorwort Unter dem Einfluss einiger CSS-Interaktio...

Natives js zum Erreichen eines einfachen Karusselleffekts

In diesem Artikel wird der spezifische Code von j...

MySQL verwendet den Befehl truncate, um alle Tabellen in einer Datenbank schnell zu löschen

1. Führen Sie zuerst die Select-Anweisung aus, um...

Beispiel für die Konfiguration mehrerer virtueller Hosts in nginx

Es ist sehr praktisch, den virtuellen Host vhost ...

Lösung für VMware Workstation Pro, das unter Windows nicht läuft

Hat jemand von Ihnen nach dem Nationalfeiertag fe...

Lösung für den Konfigurationsfehler des Nginx-SSL-Zertifikats

1. Einleitung Wenn ein Webprojekt auf unserem Lin...

Tipps zum reflektierenden Lernen von JavaScript

Inhaltsverzeichnis 1. Einleitung 2. Schnittstelle...

Detaillierte Erklärung, wie Angular mit unerwarteten Ausnahmefehlern umgeht

Vorne geschrieben Unabhängig davon, wie gut der C...

Detaillierte Erläuterung der Axios-Kapselung und des API-Schnittstellenmanagements im React-Projekt

Inhaltsverzeichnis Vorwort Installieren Einführun...

Erfahren Sie, wie Sie saubere und standardmäßige HTML-Tags schreiben

Guter HTML-Code ist die Grundlage einer schönen W...