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

So binden Sie einen Domänennamen an den Nginx-Dienst

Konfigurieren Sie mehrere Server in nginx.conf: B...

Beispiel zum Erstellen eines lokalen Benutzers in MySQL und Erteilen von Datenbankberechtigungen

Vorwort Wenn Sie MySQL installieren, erstellen Si...

Schreiben eines Shell-Skripts in Ubuntu zum automatischen Start beim Booten (empfohlen)

Der Zweck des Schreibens von Skripten besteht dar...

Teilen Sie 13 grundlegende Syntax von Typescript

Inhaltsverzeichnis 1. Was ist Ts 2. Grundlegende ...

Tutorial zum Deaktivieren und Aktivieren von Triggern in MySQL [Empfohlen]

Bei der Verwendung von MySQL werden häufig Trigge...

WeChat-Applet implementiert Taschenrechnerfunktion

WeChat-Miniprogramme erfreuen sich immer größerer...

Beispielcode zur Implementierung der bidirektionalen Authentifizierung mit Nginx+SSL

Erstellen Sie zunächst ein Verzeichnis cd /etc/ng...

Lösung zur Deinstallation von Python und Yum im CentOs-System

Hintergrund des Unfalls: Vor einigen Tagen habe i...

Zusammenfassung und ausführliche Erläuterung der Docker-Container-Bedienungsanleitung

1. Erstellen und Ausführen eines Containers docke...

Linux Dateisystemtyp anzeigen Beispielmethode

So überprüfen Sie den Dateisystemtyp einer Partit...

Detaillierte Erläuterung der zugrunde liegenden Implementierungsmethode des Nginx-Polling-Algorithmus

Einführung in den Polling-Algorithmus Viele Leute...

Die Idee und der Prozess von Vue zur Realisierung der Funktion zum Speichern von Konto und Passwort

Inhaltsverzeichnis Umsetzungsideen Es gibt drei M...

Lösung für das Problem ungültiger Breiteneinstellungen für Label und Span

Standardmäßig ist die Einstellung der Breite für B...

Detaillierte Erläuterung der Schreibreihenfolge und Ausführungsreihenfolge von SQL-Abfrageanweisungen der MySQL-Reihe

Inhaltsverzeichnis 1. Die Schreibreihenfolge eine...

Zusammenfassung der Erfahrungen mit der Entwicklung von HTML+CSS-Projekten (empfohlen)

Ich habe mein Blog seit mehreren Tagen nicht aktu...