Während des Erzeugungsprozesses der Uhr dachte ich an die folgenden Möglichkeiten, das Zifferblatt zu schreiben:
Natürlich kann es mit diesem Muster erreicht werden, daher müssen wir ein bestes Verständnis verwenden und der Code hat eine relativ einfache Möglichkeit, es zu implementieren.
1. Verwenden Sie trigonometrische Funktionen
Während der Verwendung von JS, um das Zifferblatt in trigonometrischen Funktionen zu ordnen, habe ich diese Situation begegnet: Auf der Skala des Zifferblatts können bei der Berechnung spezifischer Werte mit trigonometrischen Funktionen die Ganzzahl nicht erhalten werden, und es muss abgerundet werden, sodass einige Abweichungen unsichtbar werden, und solche Abweichungen sind schwierig, um sich mit Stilen anzupassen. Selbst wenn der endgültige Effekt erreicht werden kann, wirken sich die Abweichungen in den subtilen Lücken und Winkeln auf die visuelle Erfahrung des Gesamts aus. Als Programmentwickler ist solche visuelle Erfahrung von anderen schwer zu erkennen und aufgegeben.
2. Verwenden Sie Maskierungsschicht
JS verwendet Maskierungsschicht, hauptsächlich auf der Zifferblattskala. Die Zifferblattskala hat Länge und kurz und alle 5 Skalen haben eine längere Skala. Auf diese Weise ist die Länge der Skala, die wir mit Maskierungsschicht verwenden, gleich, und es ist schwierig, die anderen Skalen weiter anzupassen, also geben wir auf.
3.. Nutzungspositionierung und (Vater-Kind-Beziehung) (empfohlen)
Ich denke, es ist am besten, mit der Methode zur Positionierung und Vater-Kind-Beziehungen zu verstehen und zu beginnen. Ich werde es hier mit Ihnen teilen. Hier ist der Implementierungscode:
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> </title> <style media = "screen"> * {margin: 0; Polsterung: 0; } #clock {width: 600px; Höhe: 600px; Grenze: 4px festes Lichtgrad; Rand: Auto; Position: Relativ; Grenzradius: 50%; } #Scale {width: 20px; Höhe: 100%; Position: absolut; Links: 50%; Margin -Links: -10px; /*Hintergrund: grün;*/} #point {width: 4px; Höhe: 10px; Hintergrund: LightGray; Rand: Auto; } #Number {width: 20px; Höhe: 20px; Rand: 5px; /*Hintergrund: rot;*/ Schriftgröße: 20px; Text-Align: Mitte; Zeilenhöhe: 20px; } #Hour {width: 12px; Höhe: 180px; Hintergrund: Rot; Border-Radius: 6PX; Transform-Origin: 50% 150px; Position: absolut; Top: 150px; Links: 50%; Rand -Links: -6px; } #minute {width: 8px; Höhe: 250px; Hintergrund: Orange; Position: absolut; Border-Radius: 4px; Transform-Origin: 50% 200px; Oben: 100px; Links: 50%; Rand -Links: -4px; } #second {width: 4px; Höhe: 360px; Hintergrund: Rot; Border-Radius: 2PX; Position: absolut; Top: 0; Links: 50%; Rand -Links: -2px; Transform-Origin: 50% 300px; Z-Index: 100; } </style> </head> <body> <div id = "clock"> <div id = "stündlich"> </div> <div id = "minute"> </div> <div id = "Second"> </div> </body> <script type = "text/javaScript"> var takt = document.getElementById ('clock'); var Hour = document.getElementById ('Hour'); var minute = document.getElementById ('Minute'); var Second = document.getElementById ('Second'); function sascle () {var currentDate = new Date (); var Stunden = currentDate.gethours (); var minuten = currentDate.getminutes (); var Seconds = currentDate.getSeconds (); Sekunden = Stunden * 3600 + Minuten * 60 + Sekunden; Hour.Style.transform = 'rotate ('+Sekunden / 120+'Deg)'; Minute.Style.transform = 'rotate ('+Sekunden * 0,1+'Deg)'; Second.Style.transform = 'rotate ('+Sekunden * 6+'Deg)'; } setInterval ('surface ()', 1000); für (var i = 1; i <61; i ++) {var scale = document.createelement ('div'); scale.id = 'scale'; scale.style.transform = 'rotate ('+i * 6+'deg)'; Clock.AppendChild (Skala); var point = document.createelement ('div'); point.id = 'point'; Scale.AppendChild (Punkt); var number = document.createelement ('div'); number.id = 'nummer'; Nummer point.style.height = '15px'; } scale.AppendChild (Nummer); } </script> </html>Notizen sollten während der Kalibrierung bezahlt werden:
1. Das Folgende ist das Rendering -Diagramm, das Schritt für Schritt implementiert wird. Schließlich sind die Details eng übereinstimmen. Es werden keine anderen Methoden verwendet, um es zu optimieren. Nach Abschluss des Stillayouts kann die aktuelle Zeit erhalten und korrigiert werden. Während des Korrekturprozesses gibt es ein solches Problem. Ich hoffe, dass jeder darauf achten kann: Der Rotationswinkel der Stundenhand kann nicht in Einheiten von Stunden berechnet werden. Zum Beispiel: 9:58 Zu diesem Zeitpunkt beträgt die Position des Stundenzeigers 9. Wenn 10:00 Uhr die folgende Position der Stundenzeiste in die Position von 10 springt. Daher sollte der Winkel der Stundenhand in Minuten oder Sekunden berechnet werden, und der Winkel der winzigen Hand sollte in Minuten oder Sekunden berechnet werden. Die Sekundenzeigerin springt um 6 Grad pro Sekunde.
2. Eine andere Sache zu beachten ist, dass der Rotationszentrum der drei Zeiger unter Verwendung von Transform-Originen bestimmt werden muss, um den Rotationspunkt des Zeigers zu bestimmen.
In dem obigen Artikel wird kurz die Erzeugung von Uhren (JS handgeschriebener prägnanter Code) erörtert, der alles in dem Inhalt ist, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.