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

Detaillierte Installation und Konfiguration von Subversion (SVN) unter Ubuntu

Wenn Sie Softwareentwickler sind, müssen Sie mit ...

Grafisches Tutorial zur Installation und Konfiguration von mysql 5.7.17 winx64.zip

Vorwort: Ich habe Win10 neu installiert und gleic...

JavaScript zur Implementierung eines einziehbaren sekundären Menüs

Der spezifische Code zur Implementierung des einz...

Analyse der Verwendung von „replace“ und „regexp“ zum Ersetzen regulärer Ausdrücke in MySQL

Dieser Artikel veranschaulicht anhand von Beispie...

Zusammenfassung der CJK-Zeichen (vereinheitlichte chinesische, japanische und koreanische Ideogramme) in Unicode

CJK ist die Abkürzung für CJK Unified Ideographs,...

Vue implementiert ein Suchfeld mit einer Lupe

In diesem Artikel erfahren Sie, wie Sie mit Vue e...

Teilen Sie den detaillierten Prozess zum Einrichten von Mysql5.6, um externen Netzwerkzugriff zu ermöglichen

Ich habe kürzlich MySQL 5.6 bereitgestellt und fe...

Allgemeine Lösungen für das Ablaufen der Lese-/Schreibtrennung in MySQL

Die Fallstricke der Lese- und Schreibtrennung in ...

Auszeichnungssprache - Bildersetzung

Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...

Zusammenfassung der Lastausgleichsmethoden von Nginx

Um den Lastenausgleich zu verstehen, müssen Sie s...

Front-End-JavaScript-Versprechen

Inhaltsverzeichnis 1. Was ist Promise 2. Grundleg...

Zusammenfassung verschiedener gängiger Abfragebeispiele für Join-Tabellen in MySQL

Dieser Artikel beschreibt anhand von Beispielen v...

Detailliertes Tutorial zur Installation einer MySQL-Datenbank in einer Linux-Umgebung

1. Installieren Sie die Datenbank 1) yum -y insta...

Lösen Sie das Problem verstümmelter Daten bei der MySQL-Datenbankmigration

Unter den Anweisungen meines Vorgesetzten übernah...

Zusammenfassung der Probleme bei der Installation und Verwendung des MySQL 5.7.19 Winx64 ZIP-Archivs

Heute habe ich gelernt, MySQL zu installieren. Da...