Durante o processo de geração do relógio, pensei nas seguintes maneiras de escrever o mostrador:
Obviamente, ele pode ser alcançado usando esse padrão, por isso precisamos usar o melhor entendimento e o código tem uma maneira relativamente simples de implementá -lo.
1. Use funções trigonométricas
No processo de uso do JS para organizar o mostrador nas funções trigonométricas, encontrei essa situação: na escala do mostrador, ao calcular valores específicos com funções trigonométricas, o número inteiro não pode ser obtido e precisa ser recuperado com os estilos. Mesmo que o efeito final possa ser alcançado, os desvios nas lacunas e ângulos sutis afetarão a experiência visual geral. Como desenvolvedor de programas, essa experiência visual é difícil de ser reconhecida por outros e desistida.
2. Use camada de mascaramento
O JS usa camada de mascaramento, principalmente na escala de discagem. A escala de discagem tem comprimento e curta, e a cada 5 escalas tem uma escala mais longa. Dessa forma, o comprimento da escala que usamos camada de mascaramento é o mesmo e é difícil continuar ajustando as outras escalas, por isso desistimos.
3. Posicionamento de utilização e (relação pai filho) (recomendado)
Eu acho que é melhor entender e começar com o método de posicionamento e relacionamentos pai-filho. Vou compartilhar com você aqui. Aqui está o código de implementação:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <style media = "screen"> * {margin: 0; preenchimento: 0; } #clock {width: 600px; Altura: 600px; borda: 4px Solid LightGray; margem: automático; Posição: relativa; Radio de fronteira: 50%; } #scale {width: 20px; Altura: 100%; Posição: Absoluto; Esquerda: 50%; margem -esquerda: -10px; /*Antecedentes: verde;*/} #point {width: 4px; Altura: 10px; Antecedentes: LightGray; margem: automático; } #Number {largura: 20px; Altura: 20px; Margin-top: 5px; /*Antecedentes: vermelho;*/ font-size: 20px; Alinhamento de texto: centro; altura de linha: 20px; } #hour {width: 12px; Altura: 180px; Antecedentes: vermelho; Radio de fronteira: 6px; Origina de transformação: 50% 150px; Posição: Absoluto; topo: 150px; Esquerda: 50%; margem -esquerda: -6px; } #Minute {Width: 8px; Altura: 250px; Antecedentes: laranja; Posição: Absoluto; Radio de fronteira: 4px; Origina de transformação: 50% 200px; topo: 100px; Esquerda: 50%; margem -esquerda: -4px; } #second {width: 4px; Altura: 360px; Antecedentes: vermelho; Radio de fronteira: 2px; Posição: Absoluto; topo: 0; Esquerda: 50%; margem -esquerda: -2px; Origina de transformação: 50% 300px; Index z: 100; } </style> </ad Head> <body> <div id = "clock"> <div id = "hour"> </div> <div id = "minuto"> </div> <div id = "segundo"> </div> </body> <script type = "text/javascript"> var relógio = document.getElementByid ('relógio'); var hour = document.getElementById ('hora'); var minuto = document.getElementById ('minuto'); var segundo = document.getElementById ('segundo'); função superfície () {var currentDate = new Date (); var horas = currentDate.gethours (); var minse = currentDate.getminutes (); var Seconds = currentDate.getSeconds (); segundos = horas * 3600 + minutos * 60 + segundos; hour.style.transform = 'girate ('+segundos / 120+'deg)'; minuto.style.transform = 'girate ('+segundos * 0,1+'deg)'; Second.style.Transform = 'Rotate ('+segundos * 6+'deg)'; } setInterval ('Surface ()', 1000); for (var i = 1; i <61; i ++) {var scale = document.createElement ('div'); escala.id = 'escala'; scale.style.Transform = 'girate ('+i * 6+'deg)'; relógio.appendChild (escala); var point = document.createElement ('div'); Point.id = 'Point'; escala.AppendChild (Point); var número = document.createElement ('div'); número.id = 'número'; número.style.transform = 'girate (-'+i * 6+'deg)' if (i % 5 == 0) {number.innerhtml = i / 5; Point.style.Height = '15px'; } escala.appendChild (número); } </script> </html>As notas devem ser pagas durante a calibração:
1. A seguir, é apresentado o diagrama de renderização que é implementado passo a passo. Finalmente, os detalhes são correspondidos de perto. Nenhum outro método é usado para ajustá-lo. Após a conclusão do layout do estilo, o horário atual pode ser obtido e corrigido. Existe esse problema durante o processo de correção. Espero que todos possam prestar atenção: o ângulo de rotação da hora não pode ser calculado em unidades de horas. Por exemplo: 9:58 Nesse momento, a posição da hora do ponteiro é 9. A segunda mão salta 6 graus por segundo.
2. Outra coisa a observar é que o centro de rotação dos três ponteiros deve ser determinado usando a origem da transformação para determinar o ponto de rotação do ponteiro.
O artigo acima discute brevemente a geração de relógios (código conciso manuscrito de JS) é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.