Use CSS+JS nativo para fazer relógios simples. O efeito é o seguinte
Para alcançar esse efeito, é dividido em três partes principais: html, javascript e css
parte html
A parte HTML é relativamente simples, definindo uma div relógio, que tem a origem, hora, minuto, segunda mão, data e hora. Quanto às escalas, números e outros elementos no relógio, porque a quantidade é relativamente grande, ela é gerada usando o JVAScript usando o JVAScript.
<! doctype html> <html> <head> <meta charset = "utf-8"> <link rel = 'Stylesheet' href = 'CSS CSS externo Caminho'/> <! id = "hour-line"> </div> <div id = "minute-line"> </div> <div id = "segunda linha"> </div> <!-date-> <div id = "date-info"> </div> <!-tempo-> <div> <rd id = "hour-time"> </div> <demge "> <! </div> <script type = 'text/javascript' src = 'Javascript File Path'> </script> </body> </html>
Parte css
Antes de iniciar o código, existem algumas propriedades do CSS que precisam ser entendidas, como posicionamento, radiato de fronteira, transformação, etc.
atributos de posição
O atributo de posição especifica o tipo de posicionamento de um elemento, com cinco valores: absoluto, fixo, relativo, estático, herdado. O padrão é estático, ou seja, não há posicionamento e os elementos são exibidos de acordo com o fluxo normal de documentos; Os principais usos aqui são absolutos e relativos
Valor absulto, defina o elemento para o posicionamento absoluto e posicione -o em relação ao primeiro elemento superior que se posicionou inesperadamente estaticamente. A posição pode ser posicionada através dos atributos 'esquerda', 'top', 'direita', 'inferior'; Se o elemento superior estiver estaticamente posicionado, ele será posicionado em relação à posição do elemento corporal.
Neste exemplo, defina o relógio Div mais externo como parente, e todos os elementos inferiores são definidos como posicionamento absoluto absoluto e determine sua posição em relação ao relógio, definindo os valores de atributos como esquerda e superior.
atributo do radiato de fronteira
O atributo Radius de fronteira adiciona uma borda arredondada a um elemento. Você pode definir o tamanho de quatro cantos arredondados. Neste exemplo, use este atributo para definir o elemento do relógio para um círculo
Aqui está um exemplo: 4 elementos div, toda a largura e altura são 100px, e os efeitos do rádio da fronteira são diferentes:
Transforme atributo
A propriedade de transformação aplica uma rotação 2D ou 3D a um elemento, o que nos permite girar, escalar, mover ou inclinar o elemento. Neste exemplo, a hora, minuto, segunda, escala etc. são todos girados usando o atributo de transformação; Além disso, o atributo Transform-origin pode definir a posição do ponto base do elemento.
O código para a parte CSS
/*Global*/*{margem: 0; preenchimento: 0;}. Relógio {largura: 400px; Altura: 400px; borda: 10px Solid #333; Caixa-shadow: 0px 0px 20px 3px #444 INSET; Radio de fronteira: 210px; Posição: relativa; margem: 5px automático; Z-Index: 10; Background-Color:#f6f6f6;}/* Número do relógio*/. Clock-Num {Width: 40px; Altura: 40px; Size da fonte: 22px; Alinhamento de texto: centro; altura da linha: 40px; Posição: Absoluto; Z-Index: 8; Cor:#555; Fonte-família: Fantasy, 'Trebuchet ms';}. Em_num {font-size: 28px;}/* ponteiro*/. Linha do relógio {Position: Absolute; Z-Index: 20;}. Linha de hora {largura: 100px; Altura: 4px; TOP: 198px; Esquerda: 200px; Background-Color:#000; Radio de fronteira: 2px; Origina de transformação: 0 50%; Box-Shadow: 1px -3px 8px 3px #aaa;}. Linha de minuto {largura: 130px; Altura: 2px; TOP: 199PX; Esquerda: 190px; Background-Color:#000; Origina de transformação: 7,692% 50%; Box-Shadow: 1px -3px 8px 1px #aaa;}. Segunda linha {largura: 170px; Altura: 1px; TOP: 199.5px; Esquerda: 180px; Background-Color:#f60; Origina de transformação: 11,765% 50%; Box -shadow: 1px -3px 7px 1px #bbb;}/* origem*/. origem {width: 20px; Altura: 20px; Radio de fronteira: 10px; Background-Color:#000; Posição: Absoluto; TOP: 190px; Esquerda: 190px; Z-Index: 14;}/* Date-time*/. Date-Info {Width: 160px; Altura: 28px; altura de linha: 28px; Alinhamento de texto: centro; Posição: Absoluto; TOP: 230px; Esquerda: 120px; Z-Index: 11; Cor:#555; Peso da fonte: negrito; Fonte-família: 'Microsoft yahei';}. Time-Info {Width: 92px; Altura: 30px; altura de linha: 30px; Alinhamento de texto: centro; Posição: Absoluto; TOP: 270px; Esquerda: 154px; Z-Index: 11; cor de fundo:#555; preenchimento: 0; Box-Shadow: 0px 0px 9px 2px #222 Inset;}. Time {Width: 30px; Altura: 30px; Alinhamento de texto: centro; flutuar: esquerda; Cor: #FFF; Fonte-peso: BOLD;} #Minute-Hora {Border-left: 1px Solid #FFFF; Right-Right: 1px sólido #ffff;}/* escala*/. escala de relógio {width: 195px; Altura: 2px; Origina de transformação: 0% 50%; Z-Index: 7; Posição: Absoluto; TOP: 199PX; Esquerda: 200px;}. Scale-Show {Width: 12px; Altura: 2px; cor de fundo:#555; Float: Esquerda;}. Hidden {Width: 183px; Altura: 2px; Float: Esquerda;}Javascript Part
Não há nada a dizer sobre a parte do JS. Para operações de DOM simples, a função setInterval é executada a cada segundo, e o ângulo do ponteiro e o tempo de exibição são alterados. O código é o seguinte
(function () {window.onload = initnumxy (200, 160, 40,40); var hour_line = document.getElementById ("hour-line"); var minuto_line = document.getElementById ("minuto-line"); var secund_line = document.getElementById ("Segunda linha"); var_info); 'Sunday', 'Monday', 'Tue', 'Tue', 'Friday', 'Sunday', 'Sunday', 'Tue', 'Friday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday' 'Saturday' ]; var hour_time = Document.getElementById ("Hora"); this_day.getminutes (); (this_day.getmonty () + 1); - 90) + deg) '; this_day.gethours (): this_day.gethours (); this_day.getSeconds (); R - 0.5 * r - 0.5 * h }, { "left" : R + r - 0.5 * w, "top" : R - 0.5 * h }, { "left" : R + r - 0.5 * w, "top" : R - 0.5 * h }, { "left" : R + 0.5 * r * 1.73205 - 0.5 * w, "top" : R + 0.5 * r - 0.5 * h }, { "left" : R + 0,5 * r - 0,5 * W, "topo": r + 0,5 * r * 1,732 - 0,5 * h}, {"esquerda": r - 0,5 * w, "topo": r + 0,5 * r * 1,732 - 0,5 * h}, {"esquerda": r - 0,5 * r - 0,5 * w, "topo R - 0,5 * R - 0,5 * W, "TOP": R + 0,5 * R * 1,732 - 0,5 * H}, {"esquerda": r - 0,5 * r * 1,73205 - 0,5 * W, "top": R + 0,5 * r - 0,5 * H}, {"esquerda": r - 0,5 * R -0.5 * H}}, {0,5 * r. * w, "top": r - 0,5 * r - 0,5 * h}, {"esquerda": r - 0,5 * r - 0,5 * h}, {"esquerda": r - 0,5 * r - 0,5 * w, "top": r - 0,5 * r * 1,7320 - 0,5 * h}, {"esquerda": r - 0,5 * r * 1,7320 - 0,5 * h}, {"esquerda": r - 0,5 * 0 * r * 1,73205 - 0,5 * H}, {"esquerda": R - 0,5 * R * 1,7320 - 0,5 * H}, {"esquerda": R - 0,5 * R * 1,7320 - 0,5 * H}, {"esquerda": R - 0,5 * R. 0,5 * H}, {"esquerda": r - 0,5 * r - 0,5 * h}, {"esquerda": r - 0,5 * r - 0,5 * w, "top": r - 0,5 * r * 1.73205 - 0,5 * h}, {"esquerda": r 0,5 * w, "top": r - r 0.5 * = 1; Document.getElementsByClassName (Clock-Num "); {Clock.innerhtml + = "<div class = 'relógio-escala'>" + "<div class = 'escala oculta'> </div>" + "<div class = 'scale-show'> </div>" + "</div>"; escala [i] .Style.Transform = "Rotate (" + (i * 6 - 90) + "deg)";O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.