Durante el proceso de generación del reloj, pensé en las siguientes formas de escribir el dial:
Por supuesto, se puede lograr utilizando ese patrón, por lo que necesitamos usar una mejor comprensión y el código tiene una forma relativamente simple de implementarlo.
1. Use funciones trigonométricas
En el proceso de usar JS para organizar el dial en funciones trigonométricas, encontré esta situación: a la escala del dial, al calcular valores específicos con funciones trigonométricas, el entero no se puede obtener, y debe ser redondeado o abajo, por lo que habrá algunas deviaciones invisibles, y tales desviaciones son difíciles de ajustar con los estilos. Incluso si se puede lograr el efecto final, las desviaciones en las brechas y ángulos sutiles afectarán la experiencia visual general. Como desarrollador de programas, dicha experiencia visual es difícil de ser reconocida por otros y renunciar.
2. Use la capa de enmascaramiento
JS utiliza la capa de enmascaramiento, principalmente a la escala de dial. La escala de dial tiene longitud y corta, y cada 5 escalas tiene una escala más larga. De esta manera, la longitud de la escala que usamos la capa de enmascaramiento es la misma, y es difícil continuar ajustando las otras escalas, por lo que nos rendimos.
3. Posicionamiento de utilización y (relación padre-hijo) (recomendado)
Creo que es mejor entender y comenzar con el método de posicionamiento y relaciones padre-hijo. Lo compartiré contigo aquí. Aquí está el código de implementación:
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> </title> <style media = "pantalla"> * {margin: 0; relleno: 0; } #Clock {ancho: 600px; Altura: 600px; Border: 4px Solid LightGray; margen: auto; Posición: relativo; Radio fronterizo: 50%; } #scale {ancho: 20px; Altura: 100%; Posición: Absoluto; Izquierda: 50%; margen -izquierda: -10px; /*fondo: verde;*/} #Point {width: 4px; Altura: 10px; Antecedentes: LightGray; margen: auto; } #number {ancho: 20px; Altura: 20px; margen-top: 5px; /*fondo: rojo;*/ font-size: 20px; Text-Align: Center; Línea de altura: 20px; } #Hour {ancho: 12px; Altura: 180px; Antecedentes: rojo; Border-Radius: 6px; Originato de transformación: 50% 150px; Posición: Absoluto; Arriba: 150px; Izquierda: 50%; margen -izquierda: -6px; } #minute {ancho: 8px; Altura: 250px; Antecedentes: naranja; Posición: Absoluto; Border-Radius: 4px; Originato de transformación: 50% 200px; arriba: 100px; Izquierda: 50%; margen -izquierda: -4px; } #second {ancho: 4px; Altura: 360px; Antecedentes: rojo; Border-Radius: 2px; Posición: Absoluto; arriba: 0; Izquierda: 50%; margen -izquierda: -2px; Originato de transformación: 50% 300px; Índice Z: 100; } </style> </head> <body> <div id = "reloj"> <div id = "hora"> </div id = "minuto"> </div> <div id = "segundo"> </div> </body> <script type = "text/javaScript"> var [document.getElementById ('Clock'); var hora = document.getElementById ('hora'); var minuto = document.getElementById ('minuto'); var segundo = document.getElementById ('segundo'); función superficie () {var currentDate = new Date (); var sours = currentDate.gethours (); var minutos = currentDate.getMinutes (); var segundos = currentDate.getSeconds (); segundos = horas * 3600 + minutos * 60 + segundos; hora.style.transform = 'Rotate ('+segundos / 120+'deg)'; minuto.style.transform = 'Rotate ('+segundos * 0.1+'DEG)'; segundo.style.transform = 'Rotate ('+segundos * 6+'deg)'; } setInterval ('superficie ()', 1000); para (var i = 1; i <61; i ++) {var escala = document.createElement ('div'); escala.id = 'escala'; scale.style.transform = 'Rotate ('+i * 6+'deg)'; clock.appendChild (escala); Var Point = document.createElement ('div'); punto.id = 'punto'; escala.appendChild (punto); var número = document.createElement ('div'); número.id = 'número'; Number.Style.Transform = 'Rotate (-'+I * 6+'deg)' if (i % 5 == 0) {number.innerhtml = i / 5; punto.style.height = '15px'; } scale.appendChild (número); } </script> </html>Las notas deben pagarse durante la calibración:
1. El siguiente es el diagrama de renderizado que se implementa paso a paso. Finalmente, los detalles están estrechamente emparejados. No se utilizan otros métodos para ajustarlo. Después de completar el diseño del estilo, la hora actual se puede obtener y corregir. Existe tal problema durante el proceso de corrección. Espero que todos puedan prestar atención a: el ángulo de rotación de la mano de la hora no se puede calcular en unidades de horas. Por ejemplo: 9:58 En este momento, la posición de la mano apuntando es 9. Cuando las 10:00, la siguiente posición de la mano de la hora salta a la posición de 10. Por lo tanto, el ángulo de la mano de la hora debe calcularse en minutos o segundos, y el ángulo de la mano del minuto debe calcularse en minutos o segundos. La segunda mano salta 6 grados por segundo.
2. Otra cosa a tener en cuenta es que el centro de rotación de los tres punteros debe determinarse utilizando el origen transformado para determinar el punto de rotación del puntero.
El artículo anterior discute brevemente la generación de relojes (código conciso escrito a mano) es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.