JavaScript zum Implementieren einer einfachen Uhr
|
In diesem Artikelbeispiel wird der spezifische Code zur Implementierung einer einfachen Uhr in JavaScript zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Effektbild:
Hauptideen:1. Zeichnen Sie zunächst ein kreisförmiges Zifferblatt. 2. Verwenden Sie dann js, um die Skala in einer Schleife zu zeichnen (jede Skala ist ein Li-Tag). 4. Verwenden Sie dann JS, um den Zeiger zu bewegen. Der Code enthält ausführliche Kommentare und Sie können den Code direkt lesen.
<!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">
<title>Dokument</title>
</Kopf>
<Text>
<Stil-ID="Stil">
ul{
Listenstil: keiner;
}
#Kreis{
Breite: 200px;
Höhe: 200px;
Rahmenradius: 100px;
Rand: 1px tief schwarz;
}
#kedu li{
Breite: 1px;
Höhe: 6px;
Rahmenradius: 10px;
Hintergrundfarbe: schwarz;
transform-origin: center 101px;/*Legen Sie den Rotationsmittelpunkt und den Rotationsradius des li-Tags fest. */
Position: absolut;
links: 109px;
oben: 9px;
}
#kedu li:n-ter-Typ(5n+1){
Höhe: 12px;
Breite: 2px;
}
/* Zeichne den Sekundenzeiger. Verwende Transform, um das Div in eine Linie zu zeichnen. Die folgenden Zeiger werden so gezeichnet. */
#zweite{
Breite: 2px;
Höhe: 80px;
Hintergrundfarbe: rot;
transformieren: scaleY(1);
Position: absolut;
links: 108px;
oben: 30px;
transform-origin: bottom; /*Rotationszentrum festlegen, transform-origin: bottom; bedeutet, um ihren unteren Rand zu rotieren. */
}
#min{
Breite: 2px;
Höhe: 65px;
Hintergrundfarbe: grau;
transformieren: scaleY(1);
Position: absolut;
links: 108px;
oben: 45px;
Transform-Origin: unten;
}
#Stunde{
Breite: 2px;
Höhe: 50px;
Hintergrundfarbe: schwarz;
transformieren: scaleY(1);
Position: absolut;
links: 108px;
oben: 60px;
Transform-Origin: unten;
}
#p12{
Position: absolut;
links: 100px;
oben: 0px;
}
#p3{
Position: absolut;
links: 190px;
oben: 84px;
}
#p6{
Position: absolut;
links: 105px;
oben: 165px;
}
#p9{
Position: absolut;
links: 20px;
oben: 82px;
}
</Stil>
<div id="Kreis">
<ul id="kedu"></ul>
</div>
<div id="second"></div><!--Zeichne den Sekundenzeiger-->
<div id="min"></div><!--Zeichnen Sie den Minutenzeiger-->
<div id="hour"></div><!--Den Stundenzeiger zeichnen-->
<p id="p12">12</p>
<p id="p3">3</p>
<p id="p6">6</p>
<p id="p9">9</p>
<Skript>
// Zeichnen Sie die Uhrskala und erstellen Sie dynamisch 60 Li-Tags.
Funktion li(){
let ul=document.getElementById("kedu"); //Holen Sie sich zuerst ul, da li unter ul erstellt werden muss.
let css; //Wird verwendet, um die CSS-Einstellungen im Stil von li zu speichern.
für (lass i = 0; i < 60; i++) {
css+=`#kedu li:nth-of-type(${i+1}){transform:rotate(${i*6}deg)}`//Schleife, um den Rotationswinkel des i+1. li unter ul festzulegen. Der Rotationspunkt von li muss in CSS ul.innerHTML+=`<li></li>`; festgelegt werden.//Hier sollte += verwendet werden. Wenn = direkt verwendet wird, wird nur ein li erstellt, da es das vorherige li überdeckt. Um eine Überdeckung zu vermeiden, verwenden Sie +=.
}
let sty=document.getElementById("style")//Holen Sie sich hier das Style-Tag.
sty.innerHTML+=css //Schreibe den CSS-Style des li-Tags unter ul in style.
}
li(); //Dies ist das Ende der maßstabsgetreuen Zeichnung.
Funktion Zeit(){
let s=document.getElementById("second"); //Holen Sie sich die drei Zeiger für Stunde, Minute und Sekunde, die später für die dynamische Rotation verwendet werden.
lass m = document.getElementById("min");
let h = document.getElementById("Stunde");
//Holen Sie sich die Zeit.
let date = neues Datum();
let snum=date.getSeconds(); //Holen Sie sich die aktuelle Zeit in Sekunden.
let mnum = date.getMinutes() + snum / 60; // Aktuelle Minute abrufen. Vergessen Sie nicht, Sekunden / 60 hinzuzufügen.
let hnum=date.getHours()+mnum/60; //Wenn Sie die aktuelle Uhrzeit abrufen, vergessen Sie nicht, Minuten/60 hinzuzufügen.
s.style.transform=`rotate(${snum*6}deg)`; //Die eingestellte Transformation kann sie rotieren lassen, und der Sekundenzeiger rotiert 6 Grad pro Sekunde.
m.style.transform = `rotate(${mnum*6}deg)` // Der Minutenzeiger dreht sich ebenfalls 6 Grad pro Minute.
h.style.transform = `rotate(${hnum*30}deg)` // Hier ist es die Stunde, eine Stunde rotiert um 30 Grad, also *30.
}
setInterval(time,100) //Verwenden Sie den Timer, um diese Zeitfunktion alle 100 ms auszuführen.
</Skript>
</body>
</html>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:
|
<<: HTML Gewichtsverlust Optimieren Sie HTML-Tags zum Erstellen von Webseiten
Artikel empfehlen
Analyse des Konfigurationsprozesses der Nginx-HTTP-Integritätsprüfung
Passive Prüfung Mit passiven Integritätsprüfungen...
Erläuterung der Vorsichtsmaßnahmen für die Mysql-Master-Slave-Replikation
1. Fehler beim Verbinden mit Master 'x@xxxx:x...
So verwenden Sie xshell zum Herstellen einer Verbindung zu Linux in VMware (2 Methoden)
【Vorwort】 Ich möchte vor Kurzem das Prüfungssyste...
Der derzeit bessere Weg, eine Auswahlliste mit allen Optionen zu erstellen, wenn diese ausgewählt/fokussiert sind
Während der Entwicklung bin ich auf eine solche An...
Verwenden Sie einige Interviewfragen, um den Ausführungsmechanismus von JavaScript zu untersuchen
Inhaltsverzeichnis Vorherige Wörter Synchron und ...
vue.js lädt Bilder entsprechend der Bild-URL herunter
Als ich kürzlich an einem Frontend-Docking-Funkti...
So verwenden Sie libudev in Linux, um die VID und PID eines USB-Geräts abzurufen
In diesem Artikel verwenden wir die Libudev-Bibli...
Schritte zum Wiederherstellen von Code aus einem Docker-Container-Image
Manchmal geht der Code verloren und Sie müssen de...
Allgemeine Benennungsregeln für CSS-Klassen und IDs
Öffentlicher Name der Seite: #wrapper - - Der äuß...
Die WeChat-Applet-Entwicklung realisiert die Aktivitätsleitfunktion für Popup-Fenster auf der Startseite
Inhaltsverzeichnis 1. Nachfrage 2. Datenbankdesig...
CSS Transition erweitert und reduziert Elemente durch Ändern der Höhe
Ein allgemeines Entwicklungsbedürfnis besteht dar...
Detaillierte Erklärung der .bash_profile-Datei im Linux-System
Inhaltsverzeichnis 1. Umgebungsvariable $PATH: 2....
Detaillierte Erklärung von Cgroup, dem Kernprinzip von Docker
Das leistungsstarke Tool cgroup im Kernel kann ni...
js zur Realisierung eines Web-Musikplayers
Dieser Artikel enthält einfachen HTML- und Musikp...
mysql5.7-Remotezugriffseinstellungen
Das Einrichten des Fernzugriffs in mysql5.7 funkt...