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
Echtzeitaktualisierung einer langen Verbindung auf der Vue+WebSocket-Seite
In letzter Zeit muss das Vue-Projekt die Daten in...
【Webdesign】Teilen Sie E-WebTemplates exquisite Vorlagen für ausländische Webseiten (FLASH + PSD-Quelldatei + HTML).
Es handelt sich dabei ausschließlich um Webseiten...
10 wichtige Unterschiede zwischen HTML5 und HTML4
HTML5 ist die nächste Version des HTML-Standards....
Beispielcode für CSS, um horizontale Linien auf beiden Seiten des Textes zu erzielen
In diesem Artikel wird der CSS-Beispielcode vorge...
Das Vue-Projekt implementiert eine Fortschrittsbalkenfunktion für den Dateidownload
Im täglichen Geschäftsleben gibt es zwei gängige ...
Installationsprozess des mysql5.6.8-Quellcodes
Kernel: [root@opop ~]# cat /etc/centos-release Ce...
Installations- und Konfigurationsmethode für komprimierte MySQL Community Server-Pakete
Da ich heute MySQL installieren wollte, bin ich a...
Grafisches Tutorial zur Konfigurationsmethode für die kostenlose Installationsversion von MySQL 5.7.17 (Windows 10)
1. Übersicht Ich habe viel online gesucht und fes...
Detaillierte Installation und Verwendung der Virtuoso-Datenbank unter Linux
Ich habe kürzlich einige Dinge zu verknüpften Dat...
Vant Uploader implementiert die Komponente zum Hochladen eines oder mehrerer Bilder
In diesem Artikel wird die Vant Uploader-Komponen...
Detaillierte Erläuterung der MySQL sql_mode-Abfrage und -Einstellung
1. Führen Sie SQL aus, um anzuzeigen wählen Sie @...
MySQLs Methode zum Umgang mit doppelten Daten (Verhindern und Löschen)
Einige MySQL-Tabellen können doppelte Datensätze ...
Implementierungsidee zur Linksausrichtung der letzten Zeile des Flexbox-Layouts
Wenn es sich bei der Verwendung des Flex-Layouts ...
Gründe, warum MySQL Kill Threads nicht beenden kann
Inhaltsverzeichnis Hintergrund Problembeschreibun...
Detaillierte Erläuterung der Wissenspunkte zum MySQL Strict Mode
I. Erläuterung des strikten Modus Gemäß den Einsc...