Use CSS+JS nativo para hacer relojes simples. El efecto es el siguiente
Para lograr este efecto, se divide en tres partes principales: HTML, JavaScript y CSS
parte html
La parte HTML es relativamente simple, definiendo un reloj Div, que tiene el origen, hora, minuto, segunda mano, fecha y hora. En cuanto a las escalas, números y otros elementos en el reloj, debido a que la cantidad es relativamente grande, se genera usando jvascript usando jvascript.
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <link rel = 'stylesheet' href = 'ruta de archivo CSS externo'/> <title> reloj </title> </head> <body> <diD = "Clock"> <!-Origin-> <divs> </iv> <! id = "hour-line"> </div> <div id = "minuthin-line"> </div> <div id = "segundo-line"> </div> <!-date-> <div id = "date-Info"> </div> <!--Time-<Viv> <VIn Id = "Hour-time"> </div> <Div Id = "Minute-Time"> </div> <Div Id = "DivIve </Div Div Dive" Div Divi </div> <script type = 'text/javaScript' src = 'ruta de archivo javascript externo'> </script> </body> </html>
Parte de CSS
Antes de comenzar el código, hay algunas propiedades de CSS que deben entenderse, como posicionamiento, radio fronterizo, transformación, etc.
Atributos de posición
El atributo de posición especifica el tipo de posicionamiento de un elemento, con cinco valores: absoluto, fijo, relativo, estático, heredado. El valor predeterminado es estático, es decir, no hay posicionamiento, y los elementos se muestran de acuerdo con el flujo de documento normal; Los usos principales aquí son absolutos y relativos
Valor de absorción, establezca el elemento en posicionamiento absoluto y colóquelo en relación con el primer elemento superior que inesperadamente se colocó estáticamente. La posición se puede colocar a través de los atributos 'izquierda', 'superior', 'derecha', 'inferior'; Si el elemento superior está posicionado estáticamente, se colocará en relación con la posición del elemento del cuerpo.
En este ejemplo, establezca el reloj Div más externo en relativo, y todos los elementos inferiores se establecen en una posición absoluta absoluta, y luego determine su posición en relación con el reloj estableciendo los valores de atributos como la izquierda y la parte superior.
atributo fronterizo
El atributo de radio fronterizo agrega un borde redondeado a un elemento. Puede establecer el tamaño de cuatro esquinas redondeadas. En este ejemplo, use este atributo para establecer el elemento del reloj en un círculo
Aquí hay un ejemplo: 4 elementos Div, todos el ancho y la altura son 100px, y los efectos del radio fronterizo son diferentes:
transformar atributo
La propiedad de transformación aplica una rotación 2D o 3D a un elemento, que nos permite rotar, escalar, mover o inclinar el elemento. En este ejemplo, la hora, el minuto, el segundo, la escala, etc. se rotan utilizando el atributo de transformación; Además, el atributo de origen transformado puede establecer la posición del punto base del elemento.
El código para la parte CSS
/*Global*/*{margen: 0; Pading: 0;}. Reloj {ancho: 400px; Altura: 400px; borde: 10px Solid #333; Shadow de caja: 0px 0px 20px 3px #444 recuadro; Border-Radius: 210px; Posición: relativo; Margen: 5px Auto; Índice Z: 10; Color de fondo:#f6f6f6;}/* número de reloj*/. Clock-num {ancho: 40px; Altura: 40px; tamaño de fuente: 22px; Text-Align: Center; Línea de altura: 40px; Posición: Absoluto; índice z: 8; Color:#555; Font-Family: Fantasy, 'Trebuchet MS';}. EM_NUM {font-size: 28px;}/* pointer*/. Clock-line {posición: absoluto; Z-índice: 20;}. Hour-line {ancho: 100px; Altura: 4px; Arriba: 198px; Izquierda: 200px; Color de fondo:#000; Border-Radius: 2px; transformación-origen: 0 50%; box-shadow: 1px -3px 8px 3px #aaa;}. minuto-line {width: 130px; Altura: 2px; Arriba: 199px; Izquierda: 190px; Color de fondo:#000; Originato de transformación: 7.692% 50%; box-shadow: 1px -3px 8px 1px #aaa;}. Segunda línea {ancho: 170px; Altura: 1px; Arriba: 199.5px; Izquierda: 180px; Color de fondo:#F60; Originato de transformación: 11.765% 50%; box -shadow: 1px -3px 7px 1px #bbb;}/* origen*/. origen {ancho: 20px; Altura: 20px; Border-Radius: 10px; Color de fondo:#000; Posición: Absoluto; Arriba: 190px; Izquierda: 190px; z-índice: 14;}/* fecha-tiempo*/. fecha-info {ancho: 160px; Altura: 28px; Línea de altura: 28px; Text-Align: Center; Posición: Absoluto; Arriba: 230px; Izquierda: 120px; índice z: 11; Color:#555; Font-Weight: Bold; Font-Family: 'Microsoft Yahei';}. Time-Info {Width: 92px; Altura: 30px; Línea de altura: 30px; Text-Align: Center; Posición: Absoluto; Arriba: 270px; Izquierda: 154px; índice z: 11; Color de fondo:#555; relleno: 0; shadow de caja: 0px 0px 9px 2px #222 inset;}. tiempo {ancho: 30px; Altura: 30px; Text-Align: Center; flotante: izquierda; Color: #fff; Font-Weight: Bold;} #Minute Time {Border-Left: 1px Solid #ffff; border-right: 1px solid #ffff;}/* escala*/. Clock-Scale {Width: 195px; Altura: 2px; transformación-origen: 0% 50%; índice z: 7; Posición: Absoluto; Arriba: 199px; Izquierda: 200px;}. Scale-show {ancho: 12px; Altura: 2px; Color de fondo:#555; float: izquierda;}. escala hidden {ancho: 183px; Altura: 2px; flotante: izquierda;}parte de JavaScript
No hay nada que decir sobre la parte JS. Para operaciones DOM simples, la función SetInterval se ejecuta cada segundo, y el ángulo del puntero y el tiempo de visualización simplemente se cambian. El código es el siguiente
(function () {window.onload = initnumxy (200, 160, 40,40); var hour_line = document.getElementById ("hour-line"); var minuto_line = document.getElementById ("minuto-line"); var Second_line = document.getElementById ("Segundoline"); var Date_info = document.getElementById ("date-info"; 'Domingo', 'lunes', 'martio', 'martes', 'viernes', 'domingo', 'domingo', 'martes', 'viernes', 'domingo', 'domingo', 'domingo', 'domingo', 'domingo', 'domingo', 'domingo', 'domingo', 'domingo', 'domingo', domingo ', domingo', domingo ', domingo', domingo ', domingo', domingo ', domingo', domingo ', domingo', domingo ', domingo', domingo ', domingo', domingo ', domingo', domingo ', domingo', domingo ', domingo', domingo ', domingo', domingo ', 'Domingo', 'Domingo', 'Domingo', 'Domingo', 'Domingo', 'Domingo', 'Domingo', 'Domingo', 'Domingo', 'Domingo', 'Domingo', 'Domingo', Domingo ',' Domingo ',' Domingo ',' Domingo ',' Domingo ',' Domingo '. Document.getElementById ("Hour-Time"); this_day.getMinutes (); (this_day.getMonth () + 1); 90) + 'DEG)'; this_day.gethours (): this_day.gethours (); this_day.getSeconds ();} setInterval (setTime, 1000); : R - 0.5 * r - 0.5 * h}, {"izquierda": r + r - 0.5 * w, "top": r - 0.5 * h}, {"izquierda": r + r - 0.5 * w, "top": r - 0.5 * h}, {"izquierda": r + 0.5 * r * 1.73205 - 0.5 * w, "superior": r + 0.5 * r - 0.5 * h},},},},},},},},},},},},},},},},},},},},},},},}. : R + 0.5 * r - 0.5 * w, "top": r + 0.5 * r * 1.732 - 0.5 * h}, {"izquierda": r - 0.5 * w, "top": r + 0.5 * r * 1.732 - 0.5 * h}, {"izquierda": r - 0.5 * r - 0.5 * w, "top": r + 0.5 * r * 1.732 - 0.5 * h},},},},},},},},},},},},},},} ". : R - 0.5 * r - 0.5 * w, "top": r + 0.5 * r * 1.732 - 0.5 * h}, {"izquierda": r - 0.5 * r * 1.73205 - 0.5 * w, "top": r + 0.5 * r - 0.5 * h}, {"izquierda": r - 0.5 * r - 0.5 * h}, {"izquierda": r - r * R * 1. 0.5 * w, "top": r - 0.5 * r - 0.5 * h}, {"izquierda": r - 0.5 * r - 0.5 * h}, {"izquierda": r - 0.5 * r - 0.5 * w, "top": r - 0.5 * r * 1.73205 - 0.5 * h}, {"izquierda": r - 0.5 * r - 0.5 * w, "top": r * r * r * * r * r * r * r * r * r * r * r * r * r * r * r * r * r * r * r * r * r * r * r * r * r * r * r * r * r * r * r * r * r *: r * r * r * r * r * r * r *: r * r * r * r * r * r *: 1.73205 - 0.5 * h}, {"izquierda": r - 0.5 * r - 0.5 * h}, {"izquierda": r - 0.5 * r - 0.5 * w, "top": r - 0.5 * r * 1.73205 - 0.5 * h}, {"izquierda": r - 0.5 * w, "top": r - r - r - 0.5 * h}]; document.getElementById ("reloj"); } var clock_num = document.getElementsByClassName ("Clock-num"); 60; escala [i] .style.transform = "Rotate (" + (i * 6 - 90) + "DEG)";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.