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
15 JavaScript-Funktionen, die es wert sind, gesammelt zu werden
Inhaltsverzeichnis 1. Zahlen umkehren 2. Holen Si...
isPrototypeOf-Funktion in JavaScript
Inhaltsverzeichnis 1. istPrototyp von() Beispiel ...
Fügen Sie eine schwebende Eingabeaufforderung für das Kopfzeilensymbol in der ElementUI-Tabelle hinzu
In diesem Artikel wird hauptsächlich erläutert, w...
Beheben Sie das Problem, dass die MySQL-Datenbank unerwartet abstürzt, wodurch die Tabellendatendatei beschädigt wird und nicht gestartet werden kann
Problem: Die MySQL-Datenbank ist unerwartet abges...
So installieren Sie suPHP für PHP5 auf CentOS 7 (Peng Ge)
Standardmäßig wird PHP unter CentOS 7 als Apache ...
Detaillierte Erläuterung der MySQL-Deadlock-Prüfung und Beispiele zur Deadlock-Entfernung
1. Abfragevorgang Prozessliste anzeigen 2. Fragen...
Eine kurze Diskussion über die Definition und Vorsichtsmaßnahmen von H-Tags
Den Ergebnissen zufolge gibt es für die Definitio...
Flussdiagramm für den Webserverzugriff auf HTTP und HTTP-Zusammenarbeit
Ein Webserver kann mehrere Websites mit unabhängi...
Beispielerklärung der Alarmfunktion in Linux
Einführung in die Linux-Alarmfunktion Oben genann...
Tutorial zur Installation der DAMO-Datenbank auf Centos7
1. Vorbereitung Nach der Installation des Linux-B...
Eine kurze Erläuterung zur Verwendung des kartesischen Produktprinzips zum Abfragen mehrerer Tabellen in MySQL
MySQL-Mehrtabellenabfrage (kartesisches Produktpr...
Implementierungscode zum Hinzufügen eines Schrägstrichs zum Vue-Elementheaders
<Vorlage> <div Klasse="App-Containe...
Vue realisiert Click-Flip-Effekt
Verwenden Sie Vue, um einfach einen Click-Flip-Ef...
HTML+jQuery zur Implementierung einer einfachen Anmeldeseite
Inhaltsverzeichnis Einführung Öffentlicher Code (...
Detaillierte Erläuterung des MySQL-Clusters: Implementierung einer Master- und einer Slave-Architektur
Experimentelle Umgebung: 1. Drei CentOS 7-Server ...