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

mysql charset=utf8 verstehen Sie wirklich, was es bedeutet

Fehlerbehebungsprozess für Docker-Container, bei dem nach der Portzuordnung plötzlich keine Verbindung mehr hergestellt werden kann

1. Hintergrund Im Allgemeinen verwenden wir für D...

Implementierung einer einfachen Web-Uhr mit JavaScript

mysql charset=utf8 verstehen Sie wirklich, was es bedeutet

Einführung in das Methodenattribut des Formularformulars in HTML

Erstellen Sie mit PS in zwei Minuten eine Homepage für eine XHTML+CSS-Website

Das englische Lesen verschiedener Sonderzeichen auf der Tastatur (Wissenspopularisierung)

Was tun, wenn Sie das ursprüngliche Passwort für MySQL auf dem MAC vergessen?

jQuery erzielt einen Bildlaufwiedergabeeffekt auf großem Bildschirm

Die spezifische Verwendung von CSS-Attributen zur Optimierung der Frontend-Seitendarstellung wird sich ändern

Implementierung eines einfachen Altersrechners auf Basis von HTML+JS

Detaillierte Erläuterung der passwortfreien SSH-Anmeldekonfiguration unter Linux

Analyse und Lösung des abnormalen Problems beim Laden von JAR in Tomcat

Artikel empfehlen

Mysql verwendet gespeicherte Prozeduren, um schnell Millionen von Datenbeispielcodes hinzuzufügen

So löschen Sie den MySQL 8.0-Dienst vollständig unter Linux

Einführung in häufig verwendete Schriftarten im Web (Schriftarten, die von iOS- und Android-Browsern unterstützt werden)

Fehlerbehebungsprozess für Docker-Container, bei dem nach der Portzuordnung plötzlich keine Verbindung mehr hergestellt werden kann

Was tun, wenn Sie Ihr MySQL-Passwort vergessen?

Html+css, um reinen Text und Schaltflächen mit Symbolen zu erreichen

Installieren Sie JDK1.8 in einer Linux-Umgebung

Mehrere Methoden zur Implementierung von Karussellbildern in JS

mysql drei Tabellen verbunden, um eine Ansicht zu erstellen

js zur Realisierung von Login- und Registrierungsfunktionen

Erläutern Sie das Binlog-Protokoll von MySQL und wie Sie das Binlog-Protokoll zum Wiederherstellen von Daten verwenden

So konfigurieren Sie Hexo und GitHub zum Binden eines benutzerdefinierten Domänennamens unter Windows 10

Eine kurze Erläuterung temporärer MySQL-Tabellen und abgeleiteter Tabellen

Detaillierte Erklärung des strikten Modus in JavaScript

Tutorial zum Herunterladen und Installieren von XFTP (grafisches Tutorial)