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

Ein Artikel zeigt Ihnen, wie Sie den Watch-Listener von Vue verwenden

Inhaltsverzeichnis Hörer beobachten Format Richte...

Zusammenfassung der für MySQL erforderlichen allgemeinen Kenntnisse

Inhaltsverzeichnis Primärschlüsseleinschränkung E...

So legen Sie in Linux eine feste IP fest (getestet und effektiv)

Öffnen Sie zunächst die virtuelle Maschine Öffnen...

Softwaretests – MySQL (VI: Datenbankfunktionen)

1.MySQL-Funktionen 1. Mathematische Funktionen PI...

Anweisungen zur Verwendung des Meta-Viewport-Tags (Zoom-Steuerung beim mobilen Surfen)

Wenn OP eine Webseite mit der aktuellen Firmware ...

Die beste Lösung zur Implementierung digitaler Plus- und Minus-Buttons mit reinem CSS

Vorwort: Für die Implementierung digitaler Additi...

Lösung für die MySQL-Installationsaufforderung „Geben Sie für weitere Hilfe bitte NET HELPMSG 3534 ein“

Bei der heutigen Installation von MySQL erscheint...

Detaillierte Erklärung des Vue Notepad-Beispiels

In diesem Artikelbeispiel wird der spezifische Co...

Detailliertes Installationstutorial für Windows 10 + MySQL 8.0.11 Zip

Vorbereiten: Downloadadresse für das MySQL 8.0 Wi...

Problem beim Abrufen des Root-Passworts in MySQL 5.7 unter Linux (getestet und verfügbar)

Inhaltsverzeichnis 1. Abrufen über --skip-grant-t...

Detaillierte Erläuterung der Konfigurationsmethode des Vue-Anforderungs-Interceptors

Befolgen Sie die nachstehenden Schritte 1. Inhalt...

Detaillierte Erläuterung der stillen Anmeldung beim WeChat-Applet und der Aufrechterhaltung des benutzerdefinierten Anmeldestatus

Inhaltsverzeichnis 1. Hintergrund 2. Was ist ein ...

Implementierungsmethode für die Datenspeicherung im WeChat-Applet

Inhaltsverzeichnis Globale Variable „globalData“ ...

Vue implementiert verschiedene Ideen zur Erkennung sensibler Wortfilterkomponenten

Inhaltsverzeichnis Vorne geschrieben Anforderungs...

Detaillierte Erklärung der Gründe, warum MySQL-Verbindungen hängen bleiben

Inhaltsverzeichnis 1. Hintergrund Architektur Pro...