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
Der Grund, warum MySQL den B+-Baum als zugrunde liegende Datenstruktur verwendet
Wir alle wissen, dass die zugrunde liegende Daten...
Uniapp realisiert gleitenden Scoring-Effekt
In diesem Artikel wird der spezifische Code von U...
So implementieren Sie das Singleton-Muster in Javascript
Inhaltsverzeichnis Überblick Code-Implementierung...
Detaillierte Erläuterung des MySQL-Indexprinzips und der Abfrageoptimierung
Inhaltsverzeichnis 1. Einleitung 1. Was ist ein I...
Zusammenfassung des Front-End-Wissens im Gokudō-Spiel
Hintergrund Zu Beginn meines Japanisch-Lernens fi...
Implementierung einer MySQL-Sicherungsstrategie (vollständige Sicherung + inkrementelle Sicherung)
Inhaltsverzeichnis Entwurfsszenario Technische Pu...
Fallstudie zum Löschen und Neuinstallieren eines Mac-Knotens
Mac-Knoten löschen und neu installieren löschen K...
Zusammenfassung gängiger Befehle in Dockerfile
Syntaxzusammensetzung: 1 Anmerkungsinformationen ...
Ist Ihre Website für IE8 geeignet?
Während der Olympischen Spiele wird IE 8 Beta 2 ve...
JavaScript implementiert die Eingabeüberprüfung im Kennwortfeld
Manchmal ist es notwendig, bei Benutzereingaben e...
Eine audiovisuelle Linux-Distribution, die Audiophile anspricht
Ich bin kürzlich auf das Audiovisual Linux Projec...
So erkennen Sie mit Apache Tika, ob eine Datei beschädigt ist
Apache Tika ist eine Bibliothek zur Dateityperken...
Detaillierte Erläuterung der Bereitstellungs- und Konfigurationsmethoden des Linux-Zabbix-Agenten
1. Installieren Sie zabbix-agent auf web01 Zabbix...
Analyse des Prinzips von Nginx + Tomcat zur Erreichung eines Lastausgleichs sowie einer dynamischen und statischen Trennung
1. Implementierungsprinzip des Nginx-Lastausgleic...
Methoden und Techniken zur Gestaltung einer interessanten Website (Bild)
Haben Sie schon einmal eine Situation erlebt, in d...