Implementierung einer einfachen Web-Uhr mit JavaScript

Verwenden Sie JavaScript, um eine Webseitenuhr zu implementieren. Der Effekt ist in der folgenden Abbildung dargestellt:

Schließen Sie zunächst das Laden der Ressourcen des Zifferblatts und des Zeigers im Hauptteil ab:

<div><img src="../../image/clockface.jpg" alt=""></div>
<hr id="Stunde" >
<hr id="min">
<hr id="Sekunde">

CSS-Stil festlegen:

<Stil>
        Körper{
            Rand: 0;
        }
        div{
            Rand: 0 automatisch;
            Breite: 600px;
            Höhe: 600px;
        }
        #Stunde{
            Hintergrundfarbe: schwarz;
            Breite: 130px;
            Höhe: 10px;
            Position: fest;
            oben: 295px;
            links: 50%;
            Rand links: -65px;
        }
        #min{
            Hintergrundfarbe: rot;
            Breite: 200px;
            Höhe: 8px;
            Position: fest;
            oben: 296px;
            links: 50%;
            Rand links: -100px;
        }
        #zweite{
            Hintergrundfarbe: gelb;
            Breite: 270px;
            Höhe: 5px;
            Position: fest;
            oben: 297,5px;
            links: 50%;
            Rand links: -135px;
        }
</Stil>

Schließlich verwendet der JS-Codeteil den Loop-Timer setInterval(), um die Hauptfunktion einmal pro Sekunde aufzurufen. In der Hauptfunktion wird new Date() verwendet, um ein Zeitobjekt zu erstellen. .getHours(); .getMinutes(); .getSeconds() werden verwendet, um die aktuellen Stunden, Minuten und Sekunden abzurufen. Dann wird die in CSS integrierte Animation-Rotation verwendet, um den Winkel des Zeigers zu ändern:

setzeInterval(Uhr,1000);
var anjleSeconds=0,anjleMin=0,anjleHours=0;
Funktion beobachten() {
        var Zeit = neues Datum();
        anjleSeconds=Zeit.getSeconds()/60*360+90;
        anjleMin=Zeit.getMinutes()/60*360+90;
        anjleStunden=jetztStunden/12*360+90;
        document.getElementById("Sekunde").style.transform="rotate("+anjleSeconds+"deg)";
        document.getElementById("min").style.transform="rotate("+anjleMin+"deg)";
        document.getElementById("Stunde").style.transform="rotate("+anjleHours+"Grad)";
    }

Das aktuelle Problem besteht darin, dass Stunden-, Minuten- und Sekundenzeiger an beiden Enden gleich lang sind, da sie durch das hr-Tag dargestellt werden.

Der vollständige Code lautet wie folgt:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
    <Stil>
        Körper{
            Rand: 0;
        }
        div{
            Rand: 0 automatisch;
            Breite: 600px;
            Höhe: 600px;
        }
        #Stunde{
            Hintergrundfarbe: schwarz;
            Breite: 130px;
            Höhe: 10px;
            Position: fest;
            oben: 295px;
            links: 50%;
            Rand links: -65px;
        }
        #min{
            Hintergrundfarbe: rot;
            Breite: 200px;
            Höhe: 8px;
            Position: fest;
            oben: 296px;
            links: 50%;
            Rand links: -100px;
        }
        #zweite{
            Hintergrundfarbe: gelb;
            Breite: 270px;
            Höhe: 5px;
            Position: fest;
            oben: 297,5px;
            links: 50%;
            Rand links: -135px;
        }
    </Stil>
</Kopf>
<Text>
<div><img src="../../image/clockface.jpg" alt=""></div>
<hr id="Stunde" >
<hr id="min">
<hr id="Sekunde">
<Skript>
    setzeInterval(Uhr,1000);
    var anjleSeconds=0,anjleMin=0,anjleHours=0;
    Funktion beobachten() {
        var Zeit = neues Datum();
        anjleSeconds=Zeit.getSeconds()/60*360+90;
        anjleMin=Zeit.getMinutes()/60*360+90;
        anjleHours=Zeit.getHours()/12*360+90;
        document.getElementById("Sekunde").style.transform="rotate("+anjleSeconds+"deg)";
        document.getElementById("min").style.transform="rotate("+anjleMin+"deg)";
        document.getElementById("Stunde").style.transform="rotate("+anjleHours+"Grad)";
    }
</Skript>
</body>
</html>

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:

JS realisiert Web-Clock-Spezialeffekte
js+html5 implementiert die Canvas-Zeichnungs-Web-Clock-Methode
Von JS implementierter Digitaluhreffekt für den Countdown der Webseite
Implementierung einer einfachen Web-Uhr mit JavaScript

<<: Automatisches Erstellen und Bereitstellen mit Docker+Jenkins

>>: Die beste Erklärung zu HTTPS

So machen Sie React-Komponenten im Vollbildmodus

Implementierung einer einfachen Web-Uhr mit JavaScript

So machen Sie React-Komponenten im Vollbildmodus

Es gibt kein Problem mit dem Linux-Dateipfad beim Bereitstellen der Fenster- und Linux-Projekte

Vue implementiert ein einfaches Einkaufswagenbeispiel

Detaillierte Erläuterung der Lösung zum reibungslosen Upgrade der Nginx-Version

Detaillierte Erklärung der Funktion und Verwendung der KeepAlive-Komponente in Vue

Detaillierte Erklärung zur Verwendung von umask unter Linux

Zusammenfassung der neuen Verwendung von vi (vim) unter Linux

Reiner CSS-freier Implementierungscode für Websites mit Umschaltfunktion für den Dunkelmodus

Erstellen einer verteilten Selenium-Umgebung basierend auf Docker

React-native-Beispielcode zur Implementierung des Schiebelöscheffekts des Einkaufswagens

Artikel empfehlen

So beheben Sie das Eingabe-Jitter-Problem beim WeChat-Applet

HTML+CSS-Beispielcode für zusammengeführte Tabellenränder

Detaillierte Erklärung der Kartenüberlagerung in OpenLayers6

Auswahl der MySQL-Tabellentyp-Speicher-Engine

Textarea-Tag in HTML

Verwenden von Nginx zum Implementieren der Graustufenversion

Vue.js verarbeitet Icon-Symbole über Komponenten

So verhindern Sie, dass Hyperlinks beim Verwenden eines Links springen

Praktische Fähigkeiten, die beim Aufrufen von UNI-APP-Komponenten im easycom-Modus beherrscht werden müssen

Einführung in den Befehl „Linux-Typversion-Speicherfestplattenabfrage“

Ausführliche Erläuterung des MySQL-Gemeinschaftsindex und des eindeutigen Index

Eine kurze Einführung in JavaScript-Arrays

Beheben Sie den abnormalen Fehler beim Erstellen einer Vue-Umgebung mit Webpack

So ändern Sie das vergessene Passwort bei der Installation von MySQL auf dem Mac

So installieren Sie den Chrome-Browser auf CentOS 7