JS+CSS zur Realisierung einer dynamischen Uhr

JS+CSS zur Realisierung einer dynamischen Uhr

In diesem Artikelbeispiel wird der spezifische Code von JS+CSS zur Implementierung einer dynamischen Uhr zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Zusammenfassung der Wissenspunkte:

Die Methode document.querySelector() gibt ein Element im Dokument zurück, das dem angegebenen CSS-Selektor entspricht.

Die Methode setInterval() ruft in einem angegebenen Zeitraum (in Millisekunden) eine Funktion auf oder wertet einen Ausdruck aus.
Die Methode setInterval() ruft die Funktion wiederholt auf, bis clearInterval() aufgerufen oder das Fenster geschlossen wird. Der von setInterval() zurückgegebene ID-Wert kann als Parameter für die Methode clearInterval() verwendet werden.

HTML+js-Teil

<!DOCTYPE html>
<html lang="de">

<Kopf>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-kompatibel" content="IE=edge">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
 <link rel="stylesheet" href="shiying.css" >
 <title>Dokument</title>
</Kopf>

<Text>
 <div Klasse="Uhr">
 <div Klasse="Stunde">
 <div Klasse="hr" id="hr"></div>
 </div>
 <div Klasse="min">
 <div Klasse="mn" id="mn"></div>
 </div>
 <div Klasse="Sek">
 <div Klasse="sc" id="sc"></div>
 </div>
 </div>
 <Skripttyp="text/javascript">
 konstanter Grad = 6;
 const hr = document.querySelector('#hr');
 const mn = document.querySelector('#mn');
 const sc = document.querySelector('#sc');

 setzeIntervall(() => {

 let tag = neues Datum();
 lass hh = Tag.getHours() * 30;
 lass mm = Tag.getMinutes() * Grad;
 lass ss = Tag.getSeconds() * Grad;

 hr.style.transform = `rotateZ(${(hh) + (mm / 12)}deg)`;
 mn.style.transform = `rotateZ(${mm}deg)`;
 sc.style.transform = `rotateZ(${ss}deg)`;
 })

 </Skript>
</body>

</html>

CSS-Teil

*{
 Rand: 0;
 Polsterung: 0;
 Box-Größe: Rahmenbox;
}
Körper{
 Anzeige: Flex;
 Inhalt ausrichten: zentriert;
 Elemente ausrichten: zentrieren;
 Mindesthöhe: 100vh;
 Hintergrund: #091921;
}
.Uhr{
 Breite: 350px;
 Höhe: 350px;
 Anzeige: Flex;
 Inhalt ausrichten: zentriert;
 Elemente ausrichten: zentrieren;
 Hintergrund: URL (1613462007944.png);
 Hintergrundgröße: Abdeckung;
 Rand: 4px durchgezogen #091921;
 Randradius: 50 %;
 Boxschatten: 0 -15px 15px rgba(255,255,255,0,05),
 Einschub 0 -15px 15px rgba(255,255,255, 0,05),
 0 -15px 15px rgba(0,0,0,0,0,05),
 Einschub 0 -15px 15px rgba(0,0,0, 0,05);
}
.Uhr:vor
{
 Inhalt:"";
 Position: absolut;
 Breite: 15px;
 Höhe: 15px;
 Hintergrund: #fff;
 Randradius: 50 %;
 z-Index: 10000;

}
.Uhr .Stunde,
.Uhr .min,
.Uhr .Sek
{
 Position: absolut;

}
.Uhr .Stunde, .hr{
 Breite: 160px;
 Höhe: 160px;
}
.Uhr .min, .mn{
 Breite: 190px;
 Höhe: 190px;
}
.Uhr .sec, .sc{
 Breite: 230px;
 Höhe: 230px;
}
.hr, .mn, .sc{
 Anzeige: Flex;
 Inhalt ausrichten: zentriert;
 Position: absolut;
 Randradius: 50 %;
}
.hr:vor{
 Inhalt:"";
 Position: absolut;
 Breite: 8px;
 Höhe: 80px;
 Hintergrund: #ff105e;
 Z-Index: 10;
 Rahmenradius: 6px 6px 0 0;
}
.mn:vor{
 Inhalt:"";
 Position: absolut;
 Breite: 4px;
 Höhe: 90px;
 Hintergrund: #fff;
 Z-Index: 11;
 Rahmenradius: 6px 6px 0 0;
}
.sc:vor{
 Inhalt:"";
 Position: absolut;
 Breite: 4px;
 Höhe: 150px;
 Hintergrund: #fff;
 z-Index: 12;
 Rahmenradius: 6px 6px 0 0;
}

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 einen einfachen Digitaluhreffekt
  • HTML5 Canvas js (Digitaluhr) Beispielcode
  • Fünf Schritte zur einfachen Implementierung des JavaScript-HTML-Uhreffekts
  • JavaScript zur Implementierung der Kompassuhr von Tik Tok
  • JavaScript zum Implementieren eines einfachen Uhrbeispielcodes
  • Realisierung dynamischer Uhreffekte auf Basis von Javascript
  • Ein einfacher Uhreffekt-Implementierungscode von JS
  • Javascript zum Erzielen eines dynamischen Uhreffekts
  • Einführung in Javascript: dynamische Uhr, einige Methoden zur Anzeige der vollständigen Uhr, Countdown zum neuen Jahr
  • Von JS implementierter Digitaluhreffekt für den Countdown der Webseite

<<:  Eine detaillierte Einführung in die Tomcat-Verzeichnisstruktur

>>:  Was tun, wenn Sie Ihr Passwort in MySQL 5.7.17 vergessen?

Artikel empfehlen

Zwei Methoden zum Wiederherstellen von MySQL-Daten

1. Einleitung Vor einiger Zeit gab es eine Reihe ...

So zeigen Sie den Status von Remote-Serverdateien in Linux an

Wie unten dargestellt: Der Testbefehl stellt fest...

Grafisches Tutorial zu VMware Workstation Pro 16 zum Erstellen eines CentOS8-Clusters für virtuelle Maschinen

Inhaltsverzeichnis Vorbereitung Installieren Sie ...

CentOS 7.5 stellt Varnish-Cache-Serverfunktion bereit

1. Einführung in Varnish Varnish ist ein leistung...

Verwendung von MySQL-Fuzzy-Abfragen (regulär, Platzhalter, integrierte Funktion)

Inhaltsverzeichnis 1. MySQL-Platzhalter-Fuzzy-Abf...

CSS realisiert den Prozessnavigationseffekt (drei Methoden)

CSS realisiert den Prozessnavigationseffekt. Der ...

Detaillierte Erläuterung der häufig verwendeten Filter von Tomcat

Inhaltsverzeichnis 1. Domänenübergreifender Filte...

So ersetzen Sie alle Tags im HTML-Text

(?i) bedeutet, dass die Groß-/Kleinschreibung nich...

Einführung in das Enctype-Attribut des Form-Tags und seine Anwendungsbeispiele

Enctype: Gibt den Kodierungstyp an, der vom Browse...

Detaillierte Interpretation der Datei /etc/fstab im Linux-System

Vorwort [root@localhost ~]# cat /etc/fstab # # /e...

Die 9 besten ausländischen Websites mit kostenlosem Bildmaterial

Es ist schwierig, Websites mit gutem Bildmaterial...

Analyse des Prozesses zur Implementierung eines Nginx+Tomcat-Clusters unter Windwos

Einführung: Nginx (die Aussprache ist gleichbedeu...

Detaillierte Erklärung der Lösung für den Fehler von VMware, das Modul diskearly zu öffnen

VMWare (Virtual Machine Ware) ist ein Softwareunt...

WHMCS V7.4.2 Grafisches Installationstutorial

1. Einleitung WHMCS bietet eine Komplettlösung fü...

Einfaches Tutorial zu den Firewall-Einstellungen unter Ubuntu 20.04 (Anfänger)

Vorwort In der heutigen, immer bequemeren Interne...