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

MySQL-Einschränkungen - Super detaillierte Erklärung

Inhaltsverzeichnis MySQL-Einschränkungsoperatione...

MySQL meldet einen Fehler: Datei kann nicht gefunden werden: './mysql/plugin.frm' Lösung

Finden Sie das Problem Kürzlich habe ich bei der ...

Detaillierte Erklärung der Kodierungsprobleme bei MySQL-Befehlszeilenoperationen

1. Überprüfen Sie die MySQL-Datenbankkodierung my...

So gehen Sie mit zu vielen Docker-Protokollen um, die dazu führen, dass die Festplatte voll wird

Ich habe einen Server, auf dem mehrere Docker-Con...

Datensatz zu langsamen MySQL-Abfragen und Abfragerekonstruktionsmethoden

Vorwort Was ist eine langsame Abfrage und wie kan...

Linux verwendet iftop, um den Netzwerkkartenverkehr in Echtzeit zu überwachen

Linux verwendet iftop, um den Verkehr der Netzwer...

Lösen Sie das MySQL 5.7.9 Version sql_mode=only_full_group_by Problem

MySQL 5.7.9 Version sql_mode=only_full_group_by P...

Erste Erfahrungen mit der Texterstellung mit Javascript Three.js

Inhaltsverzeichnis Wirkung Beginnen Sie mit der T...

Wie viele Ports kann ein Linux-Server maximal öffnen?

Inhaltsverzeichnis Hafenbezogene Konzepte: Bezieh...

Detaillierte Erklärung zur Verwendung von awk unter Linux

Bevor wir awk lernen, sollten wir sed, grep, tr, ...

So verwenden Sie den Linux-Befehl md5sum

01. Befehlsübersicht md5sum - MD5-Prüfcode berech...

So erstellen Sie YUM in einer Centos7-Umgebung

1. Geben Sie die Konfigurationsdatei der Yum-Quel...

Implementierung des Einfügens von Millionen von Datensätzen in eine MySQL-Datenbank innerhalb von 10 Sekunden

Lassen Sie uns zunächst über eine Frage nachdenke...

Vue implementiert Studentenverwaltungsfunktion

In diesem Artikelbeispiel wird der spezifische Co...

Zusammenfassung der Konstruktor- und Superwissenspunkte in React-Komponenten

1. Einige Tipps zu mit class in react deklarierte...