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
So lösen Sie das Problem der Zabbix-Überwachung, das aufgrund von PHP-Problemen zu verstümmelten chinesischen Zeichen in der grafischen Benutzeroberfläche führt
Lösen Sie das Problem der verstümmelten chinesisc...
Memcached-Methode zum Erstellen eines Cache-Servers
Vorwort Viele Webanwendungen speichern Daten in e...
Ursachen und Lösungen für den MySQL-Fehler „zu viele Verbindungen“
Inhaltsverzeichnis Kurzzusammenfassung Heute Mitt...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.24
In diesem Artikel finden Sie das Installations- u...
Allgemeine Betriebsbefehle von MySQL im Linux-System
Aufschlag: # chkconfig --list Alle Systemdienste ...
Best Practices zur Implementierung einfacher Jira-Projekte mit React+TS
Eine Reihe von Projekten für die Ausbildung reagi...
7 coole dynamische Website-Designs zur Inspiration
Im Bereich Design gibt es jedes Jahr unterschiedl...
Kommunikation zwischen übergeordneten und untergeordneten Komponenten in Vue und Verwendung von Sync zum Synchronisieren der Daten übergeordneter und untergeordneter Komponenten
Inhaltsverzeichnis Vorwort Untergeordnete Kompone...
Vue implementiert Tab-Tab-Umschaltung
In diesem Artikelbeispiel wird der spezifische Co...
Vue-Beispielcode für die Online-Vorschau von Office-Dateien
Ich arbeite derzeit an elektronischen Archiven un...
6 ungewöhnliche HTML-Tags
Zuerst: <abbr> oder <acronym> Diese be...
Lösen Sie das Problem der unsicheren Docker x509-Registrierung
Nach der Installation von Docker trat beim Versuc...
Webdesign muss Zweck, Ideen, Gedanken und Beständigkeit haben
<br />Einleitung: Diese Idee kam mir, als ic...
Details zum MySQL-Datentyp
Inhaltsverzeichnis 1. Numerischer Typ 1.1 Klassif...
Zusammenfassung der Verwendung von vue Watch und Computed
Inhaltsverzeichnis 01. Hörer beobachten (1) Funkt...