Ein weiterer Takteffekt kommt. Diese Implementierung erfordert keine Leinwand, sie wird von Div, UL und Li gezeichnet, was Spaß macht und realistisch ist.
Haha ~
Die JS, die Sie benötigen, um diesen Effekt zu erzielen, um sich zu bewegen, aber es gibt nicht viel Inhalt in JS, daher ist es nicht schwierig.
Es ist hauptsächlich die Idee, Transformationen in CSS zu verwenden. Transformation hat viele sich ändernde Attribute und gewöhnliche Uhren
Es ist eine runde Sache in meinem Kopf. Kann ich diese Eigenschaft (drehen) drehen, um sie zu implementieren? Seine Skala
Wäre es nicht möglich, die Rotationspunkte in der Mitte des Kreises zu verwenden und die Mitte des Kreises umzudrehen? Der Boden der Stundenhand ist nicht
Ist die Mitte des Kreises in Kontakt? Dann wäre es in Ordnung, den Boden der Stundenhand auf den Rotationspunkt einzustellen. Ich spreche grob über meine Ideen.
Code:
<! DocType html> <html lang = "en"> <kopf> <meta charset = "utf-8"> <title> Transformation </title> <style id = "css"> #clock {width: 200px; Höhe: 200px; Grenze: 2px fest #000; Grenzradius: 50%; Rand: 100px Auto 0; Position: Relativ; } #clock ul {width: 200px; Höhe: 200px; Position: Relativ; Listenstil: Keine; Polsterung: 0; Rand: 0; } #clock ul {width: 200px; Höhe: 200px; Position: Relativ; Listenstil: Keine; Polsterung: 0; Rand: 0; } #clock ul {width: 2px; Höhe: 10px; Hintergrund: #000; Transform-Origin: Center 100px; Position: absolut; Top: 0; Links: 50%; } #clock ul li: nth-of-type (5n+1) {Höhe: 20px; } #Hour {Höhe: 40px; Breite: 4px; Hintergrund: #00fefe; Position: absolut; Oben: 60px; links: 99px; Transform-Origin: Mitte unten; } #Min {Höhe: 60px; Breite: 3px; Hintergrund: #001afe; Position: absolut; Top: 40px; links: 99px; Transform-Origin: Mitte unten; Transformation: Drehen (15 Grad); } #sec {Höhe: 70px; Breite: 2px; Hintergrund: #000; Position: absolut; Top: 30px; links: 99px; Transform-Origin: Mitte unten; } #dot {width: 10px; Höhe: 10px; Position: absolut; Links: 95px; Top: 95px; Hintergrund: #aaa; Grenzradius: 50%; } </style> </head> <body> <div id = "cakt"> <ul> </ul> <div id = "stündlich"> </div> <div id = "min"> </div> <div id = "sec"> </div> <div id = "dot" var oclock = document.getElementById ("Uhr"); var Oul = oclock.getElementsByTagName ("ul") [0]; var ohour = document.getElementById ("stündlich"); var omin = document.getElementById ("min"); var osec = document.getElementById ("sec"); var strli = ""; var strcss = ""; für (var i = 0; i <60; i ++) {strli+= "<li> </li>"; } Oul.innerhtml = strli; für (var i = 0; i <60; i ++) {strcss+= '#clock ul li: n-vom-type ('+(i+1)+') {Transformation: rotate ('+i*6+'Deg);}'; } ocss.innerhtml+= strcss; Zeit(); setInterval (Zeit 1000); Funktionszeit () {var date = new Date (); var H = Datum.Gethours (); var m = date.getminutes (); var s = date.getSeconds (); ohr.style.transform = "rotate ("+(h+m/60)*30+"deg)"; omin.Style.transform = "rotate ("+(m+s/60)*6+"deg)"; osec.Style.transform = "rotate ("+s*6+"deg)"; } </script> </body> </html>Das Wichtigste beim Zeichnen mit Tags ist die Positionierung, da wir auf diese Weise die Box, die in der gewünschten Position in Form gebildet wurde, in Form bringen können. Das interne CSS -Stilblatt kann durch das Erhalten von Elementen erhalten werden, sodass Sie mit Innerhtml Stile hinzufügen und in einer Schleife hinzufügen können. Es gibt auch viele Skalen, sodass Sie Schleifen zum Hinzufügen verwenden können, was Zeit und Mühe spart. Was die verbleibende Zeit betrifft, können Sie die Funktion alle 1 Sekunden lang ausführen, damit sie sich bewegen wird.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.