Natives JS zur Implementierung einer Echtzeituhr
|
Teilen Sie einen Echtzeituhreffekt, der mit nativem JS implementiert wurde. Der Effekt ist wie folgt (PS: Der tatsächliche Zeiger bewegt sich um 360 Grad, beim Aufnehmen eines Screenshots wurde nur ein Teil davon erfasst)
Für den obigen Effekt sind insgesamt 4 Bilder erforderlich, nämlich das Zifferblatt, der Stundenzeiger, der Minutenzeiger und der Sekundenzeiger. Sie können bei Bedarf Ihre eigenen Bilder erstellen. Der Implementierungscode lautet wie folgt:
<!DOCTYPE html>
<html>
<head lang="de">
<meta charset="UTF-8">
<title>Natives JS zur Implementierung einer Echtzeituhr</title>
<Stil>
.Uhr {
Breite: 600px;
Höhe: 600px;
Rand: 100px automatisch;
/*Zifferblatthintergrund*/
Hintergrund: URL (Bilder/0.jpg) keine Wiederholung;
Position: relativ;
}
.clock div {
Position: absolut;
oben: 0;
links: 0;
Breite: 100 %;
Höhe: 100%;
/* Bild des Stundenzeigers */
Hintergrund: URL (Bilder/1.png) keine Wiederholung, Mitte, Mitte;
}
#M {
/* Bild des Minutenzeigers*/
Hintergrundbild: URL (Bilder/2.png);
}
#S {
/* Bild aus zweiter Hand*/
Hintergrundbild: URL (Bilder/3.png);
}
</Stil>
</Kopf>
<Text>
<div Klasse="Uhr">
<div id="h"></div>
<div id="m"></div>
<div id="s"></div>
</div>
<Skript>
// Element abrufen var h = document.getElementById("h"); // Stunden var m = document.getElementById("m"); // Minuten var s = document.getElementById("s"); // Sekunden var timer = null;
// Ändere den Drehwinkel jeder Box in Echtzeit entsprechend der aktuellen Zeit timer = setInterval(function () {
var date = neues Datum();
// Berechnen Sie den Winkel der Boxbewegung basierend auf jedem Zeitteil des aktuellen Datums // 360/12 30 Grad/Stunde h.style.transform = "rotate(" + date.getHours() * 30 + "deg)";
// 360/60 pro Minute 6 Grad/Minute m.style.transform = "rotate(" + date.getMinutes() * 6 + "deg)";
// 360/60 pro Sekunde 6 Grad/Sekunde s.style.transform = "rotate(" + date.getSeconds() * 6 + "deg)";
}, 1000);
</Skript>
</body>
</html>Weitere JavaScript-Uhreffekte finden Sie hier: Spezialthema „JavaScript-Uhreffekte“ 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:
|
<<: Detaillierte Erklärung der MySQL 8.0.18-Befehle
>>: Detailliertes Tutorial zur Installation des Jenkins-Containers in einer Docker-Umgebung
Artikel empfehlen
Einige Vorschläge für HTML-Anfänger und Neulinge, Experten können sie ignorieren
Gefühle: Ich bin Backend-Entwickler. Manchmal fühl...
Docker-Container erklärt ausführlich, wie man das Image vereinfacht und die Größe reduziert
Inhaltsverzeichnis 1. Reduzieren Sie die Anzahl d...
Docker verwendet das Tool nsenter, um in den Container zu gelangen
Bei der Verwendung von Docker-Containern ist es b...
Eine detaillierte Einführung in die Speicherverwaltung und -adressierung unter Linux
Inhaltsverzeichnis 1. Konzept Speicherverwaltungs...
Detaillierte Erklärung zum Übergeben von Werten zwischen React-Hook-Komponenten (mithilfe von ts)
Inhaltsverzeichnis Vom Vater zum Sohn Vom Sohn zu...
Detaillierte Erläuterung von zwei Möglichkeiten zum dynamischen Ändern von CSS-Stilen in React
Die erste Methode: Fügen Sie dynamisch eine Klass...
Docker View-Prozess, Speicher und Cup-Verbrauch
Docker-Ansichtsprozess, Speicher, Cup-Verbrauch S...
MySQL NULL-Datenkonvertierungsmethode (unbedingt lesen)
Wenn Sie MySQL zum Abfragen der Datenbank verwend...
Eine kurze Diskussion über den Spaß von :focus-within in CSS
Ich glaube, einige Leute haben dieses Bild gesehe...
Detaillierte Erläuterung des Docker-Arbeitsmodus und -Prinzips
Wie in der folgenden Abbildung dargestellt: Wenn ...
So erstellen Sie eine Deep-Learning-Umgebung mit Python in einem Docker-Container
Überprüfen Sie die Virtualisierung im Task-Manage...
Verwenden von Vue zum Implementieren einer Timerfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Unternehmenswebsite und Kolumnenwörterbuch Chinesisch-Englisch-Vergleich Freunde, die zweisprachige Unternehmenswebsites auf Chinesisch und Englisch erstellen, benötigen
Name Charakter Name Charakter Information Nachric...
Vue realisiert den Card-Flip-Effekt
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erläuterung der Verwendung von Redux bei der nativen WeChat-Applet-Entwicklung
Prämisse In komplexen Szenarien müssen große Date...