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

Lösen Sie das Fehlerproblem von Warnungen, die möglicherweise mit der Option „--fix“ behoben werden können, wenn Sie ein Vue-Projekt ausführen

Problem: vue-cil3 wird mit Warnungen ausgeführt, ...

HTML+CSS+JavaScript, um eine Rubbellosversion für die Freundin zu erstellen (Sie werden es lernen, sobald Sie es sehen)

Ich glaube, jeder hat schon einmal Rubbellose ges...

CSS-Listenverschiebung, um zu verhindern, dass sie von unten verdeckt wird, und um sich an die längere Verarbeitung des Bildschirmmodells anzupassen

1. Wenn das mobile Endgerät die Listenverschiebun...

Natives JS zur Implementierung einer Echtzeituhr

HTML-Maus-CSS-Steuerung

MySQL query_cache_type-Parameter und Verwendungsdetails

Bringen Sie Ihnen bei, wie Sie in 5 Minuten den Redis-Clustermodus und den Sentinelmodus mit Docker erstellen

mysql ersetzt einen Teil des Feldinhalts und mysql ersetzt die Funktion replace()

Detaillierte Erläuterung zum Erstellen eines kontinuierlichen Integrationsclusterdienstes basierend auf Docker-Swarm

Eine kurze Analyse des Tutorials zur Installation von MySQL 8.0.18 auf CentOS 6.8 (RPM-Methode)

Detaillierte Erklärung der Unterschiede zwischen var, let und const in JavaScript es6

MySQL-Optimierungstipps: Analyse der Implementierungsmethoden zur Duplikatsentfernung [Millionen von Daten]

Details zum Like-Operator in MySQL

Detaillierte Erklärung, wie Sie den Speicherverbrauch in MySql reduzieren können

Artikel empfehlen

Das Vue-Cropper-Plugin realisiert die Kapselung der Bildaufnahme- und Upload-Komponente

Analyse der Docker-Methode zum Erstellen lokaler Images

So verwenden Sie Linux-Befehle in IDEA

Serielle und parallele Operationen in JavaScript

Detailliertes Beispiel für die Verwendung von MySQL-Triggern

Multiservice-Image-Packaging-Vorgang von Dockerfile unter Aufsicht

Was Sie über Filter in Vue wissen müssen

Lösen Sie das Fehlerproblem von Warnungen, die möglicherweise mit der Option „--fix“ behoben werden können, wenn Sie ein Vue-Projekt ausführen

HTML+CSS+JavaScript, um eine Rubbellosversion für die Freundin zu erstellen (Sie werden es lernen, sobald Sie es sehen)

CSS-Listenverschiebung, um zu verhindern, dass sie von unten verdeckt wird, und um sich an die längere Verarbeitung des Bildschirmmodells anzupassen

So löschen Sie Standardformate und legen allgemeine Formate in CSS fest

Detaillierte Schritte zur Installation von ros2 in Docker

Beispielcode zum Implementieren eines gleichhohen Layouts auf mehrere Arten mit CSS

Detaillierte Erklärung der JavaScript-Prototypenkette

Netzwerkkonfiguration des Host Only+NAT-Modus unter VirtualBox