Se acerca otro efecto de reloj. Esta implementación no requiere lienzo, es dibujada por Div, UL y Li, lo cual es divertido y realista.
Jaja ~
El JS que necesitas para lograr este efecto de moverte, pero no hay mucho contenido en JS, por lo que no es difícil.
Es principalmente la idea de usar transformación en CSS. Transform tiene muchos atributos cambiantes y relojes ordinarios
Es algo redondo en mi mente. Entonces, ¿puedo rotar esta propiedad (rotar) para implementarla? Su escala
Usando rotación y configuración del punto de rotación en el centro del círculo, ¿no sería posible dar la vuelta al centro del círculo? La parte inferior de la mano de la hora no es
¿Está en contacto el centro del círculo? Entonces estaría bien colocar la parte inferior de la mano de la hora en el punto de rotación. Hablo más o menos sobre mis ideas.
Código:
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> transform </title> <style id = "css"> #clock {width: 200px; Altura: 200px; Border: 2px Solid #000; Radio fronterizo: 50%; Margen: 100px Auto 0; Posición: relativo; } #Clock Ul {ancho: 200px; Altura: 200px; Posición: relativo; Estilo de lista: Ninguno; relleno: 0; margen: 0; } #Clock Ul {ancho: 200px; Altura: 200px; Posición: relativo; Estilo de lista: Ninguno; relleno: 0; margen: 0; } #Clock Ul {Width: 2px; Altura: 10px; Antecedentes: #000; transformación de origen: centro 100px; Posición: Absoluto; arriba: 0; Izquierda: 50%; } #Clock Ul Li: NTH-of-type (5n+1) {altura: 20px; } #Hour {altura: 40px; Ancho: 4px; Antecedentes: #00fefe; Posición: Absoluto; Arriba: 60px; Izquierda: 99px; transformación-origen: fondo central; } #min {altura: 60px; Ancho: 3px; Antecedentes: #001AFE; Posición: Absoluto; Arriba: 40px; Izquierda: 99px; transformación-origen: fondo central; transformar: girar (15 grados); } #sec {altura: 70px; Ancho: 2px; Antecedentes: #000; Posición: Absoluto; arriba: 30px; Izquierda: 99px; transformación-origen: fondo central; } #dot {ancho: 10px; Altura: 10px; Posición: Absoluto; Izquierda: 95px; Arriba: 95px; Antecedentes: #AAA; Radio fronterizo: 50%; } </style> </head> <body> <div id = "reloj"> <ul> </ul> <div id = "hora"> </div> <div id = "min"> </div> <div id = "sec"> </div> <div it = "dot"> </div> </div> <script> var ocss = document.getElementByid ("css");;;;;; var oclock = document.getElementById ("reloj"); var oUl = oclock.getElementsBytagName ("ul") [0]; var ohour = document.getElementById ("hora"); var omin = document.getElementById ("min"); var osec = document.getElementById ("Sec"); var strli = ""; var strcss = ""; para (var i = 0; i <60; i ++) {strli+= "<li> </li>"; } oUl.innerhtml = strli; para (var i = 0; i <60; i ++) {strcss+= '#reloj ul li: nth-de-type ('+(i+1)+') {transform: rotate ('+i*6+'deg);}'; } ocss.innerhtml+= strcss; tiempo(); setInterval (tiempo, 1000); function time () {var date = new Date (); var h = date.gethours (); var m = date.getminutes (); var s = date.getSeconds (); ohour.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>Lo más importante en el dibujo con etiquetas es el posicionamiento, porque de esta manera podemos poner la caja que se ha formado en forma en la posición que desea. La hoja de estilo CSS interna se puede obtener obteniendo elementos, de modo que pueda agregar estilos usando InnerHTML y agregarlos en un bucle. También hay muchas escalas, por lo que puede usar el bucle para agregar, lo que ahorra tiempo y esfuerzo. En cuanto al tiempo restante, puede ejecutar la función cada 1 segundo, para que se mueva.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.