Natives JS zur Implementierung einer Echtzeituhr

Teilen Sie einen Echtzeituhreffekt, der mit nativem JS implementiert wurde. Der Effekt ist wie folgt (PS: Der tatsächliche Zeiger bewegt sich um 360 Grad, beim Aufnehmen eines Screenshots wurde nur ein Teil davon erfasst)

Für den obigen Effekt sind insgesamt 4 Bilder erforderlich, nämlich das Zifferblatt, der Stundenzeiger, der Minutenzeiger und der Sekundenzeiger. Sie können bei Bedarf Ihre eigenen Bilder erstellen. Der Implementierungscode lautet wie folgt:

<!DOCTYPE html>
<html>
 
<head lang="de">
    <meta charset="UTF-8">
    <title>Natives JS zur Implementierung einer Echtzeituhr</title>
    <Stil>
        .Uhr {
            Breite: 600px;
            Höhe: 600px;
            Rand: 100px automatisch;
            /*Zifferblatthintergrund*/
            Hintergrund: URL (Bilder/0.jpg) keine Wiederholung;
            Position: relativ;
        }
 
        .clock div {
            Position: absolut;
            oben: 0;
            links: 0;
            Breite: 100 %;
            Höhe: 100%;
            /* Bild des Stundenzeigers */
            Hintergrund: URL (Bilder/1.png) keine Wiederholung, Mitte, Mitte;
        }
 
        #M {
            /* Bild des Minutenzeigers*/
            Hintergrundbild: URL (Bilder/2.png);
        }
 
        #S {
            /* Bild aus zweiter Hand*/
            Hintergrundbild: URL (Bilder/3.png);
        }
    </Stil>
</Kopf>
 
<Text>
    <div Klasse="Uhr">
        <div id="h"></div>
        <div id="m"></div>
        <div id="s"></div>
    </div>
 
    <Skript>
        // Element abrufen var h = document.getElementById("h"); // Stunden var m = document.getElementById("m"); // Minuten var s = document.getElementById("s"); // Sekunden var timer = null;
 
        // Ändere den Drehwinkel jeder Box in Echtzeit entsprechend der aktuellen Zeit timer = setInterval(function () {
            var date = neues Datum();
 
            // Berechnen Sie den Winkel der Boxbewegung basierend auf jedem Zeitteil des aktuellen Datums // 360/12 30 Grad/Stunde h.style.transform = "rotate(" + date.getHours() * 30 + "deg)";
 
            // 360/60 pro Minute 6 Grad/Minute m.style.transform = "rotate(" + date.getMinutes() * 6 + "deg)";
 
            // 360/60 pro Sekunde 6 Grad/Sekunde s.style.transform = "rotate(" + date.getSeconds() * 6 + "deg)";
 
        }, 1000);
    </Skript>
</body>
 
</html>

Weitere JavaScript-Uhreffekte finden Sie hier: Spezialthema „JavaScript-Uhreffekte“

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:

JavaScript zum Implementieren einer einfachen Uhr
js, um einen sehr einfachen Uhreffekt zu erzielen
JavaScript zeichnet einen einfachen Uhreffekt
Einfaches Beispiel für einen Uhreffekt, implementiert mit JS+CSS3
Einfaches Beispiel einer Uhrfunktion, implementiert durch natives JS
Verwenden Sie CSS + natives JS, um eine einfache Uhr zu erstellen
Detaillierte Erklärung des Date-Objekts von JavaScript (Erstellen einer einfachen Uhr)
Beispiel für eine JavaScript-Uhr

<<: Detaillierte Erklärung der MySQL 8.0.18-Befehle

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

Detaillierte Erläuterung der JS ES6-Codierungsstandards

Detaillierte Erläuterung der Definition und Verwendung von in MySQL gespeicherten Funktionen (benutzerdefinierten Funktionen)

Gespeicherte Funktionen Was ist eine gespeicherte...

Natives JS zur Implementierung einer Echtzeituhr

Detaillierte Erläuterung der JS ES6-Codierungsstandards

JavaScript implementiert die asynchrone Erfassung von Formulardaten

So erstellen Sie einen SSH-Dienst basierend auf einem Golang-Image in Docker

Beispiel für ein JavaScript-Meldungsfeld

Vue implementiert ein Beispiel zum Herunterziehen und Scrollen zum Laden von Daten

Kostenloses Tool zur Überprüfung der Richtigkeit von HTML-, CSS- und RSS-Feeds

MySQL implementiert Beispielcode, um doppelte Hinzufügungen beim Hinzufügen eines Einkaufswagens zu verhindern

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.16 winx64 unter win10

So implementieren Sie den Selbststart eines Docker-Containers

Tutorial zur Installation der dekomprimierten Version von MySQL 8.0.22 (nur für Anfänger)

Artikel empfehlen

MySQL-Beispiel für die Konvertierung von Spalten in Zeilen und die Gruppierung nach Jahr und Monat

Detaillierte Erläuterung des Prozesses zum Verpacken der Python-Umgebung durch Docker

Analyse des Implementierungsprozesses der Nginx-Hochverfügbarkeitslösung in der Produktionsumgebung

Detaillierter Prozess zum Erstellen von mysql5.7.29 unter Centos7 von Linux

Überlegungen zur Kürzung von mehrzeiligem Text mit einer Schaltfläche „Mehr anzeigen“

Methoden des adaptiven Webdesigns (gutes Zugriffserlebnis auf Mobiltelefonen)

Tutorial zum Bereitstellen mehrerer Server mit WebAPI und Konfigurieren des Nginx-Lastausgleichs

Detailliertes Tutorial zur schnellen Installation von Zookeeper in Docker

Detaillierte Erläuterung der Definition und Verwendung von in MySQL gespeicherten Funktionen (benutzerdefinierten Funktionen)

Beispiel für die Verwendung von @media responsive CSS zur Anpassung an verschiedene Bildschirme

JS praktisches objektorientiertes Schlangenspielbeispiel

Detaillierte Schritte zur Installation von Docker in 5 Minuten

Installieren Sie Mininet aus dem Quellcode auf Ubuntu 16.04

Ein umfassendes Verständnis der funktionalen Komponenten von Vue.js

nginx+tomcat-Beispiel für den Zugriff auf das Projekt über den Domänennamen