Outro efeito de relógio está chegando. Essa implementação não requer tela, é desenhada pela DIV, UL e LI, que é divertida e realista.
Haha ~
O JS que você precisa para alcançar esse efeito de se mover, mas não há muito conteúdo no JS, por isso não é difícil.
É principalmente a idéia de usar o Transform no CSS. Transform tem muitos atributos em mudança e relógios comuns
É uma coisa redonda em minha mente. Então, posso girar essa propriedade (girar) para implementá -la? Sua escala
Usando a rotação e definindo o ponto de rotação no centro do círculo, não seria possível virar o centro do círculo? O fundo da mão não é
O centro do círculo está em contato? Então, seria bom definir o fundo da hora para o ponto de rotação. Eu falo aproximadamente sobre minhas idéias.
Código:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> transform </title> <style id = "css"> #clock {width: 200px; Altura: 200px; borda: 2px sólido #000; Radio de fronteira: 50%; margem: 100px automático 0; Posição: relativa; } #clock ul {width: 200px; Altura: 200px; Posição: relativa; estilo de lista: nenhum; preenchimento: 0; margem: 0; } #clock ul {width: 200px; Altura: 200px; Posição: relativa; estilo de lista: nenhum; preenchimento: 0; margem: 0; } #clock ul {width: 2px; Altura: 10px; Antecedentes: #000; Origina de transformação: centro 100px; Posição: Absoluto; topo: 0; Esquerda: 50%; } #clock ul li: nó de tipo (5n+1) {altura: 20px; } #hour {altura: 40px; Largura: 4px; Antecedentes: #00fefe; Posição: Absoluto; topo: 60px; Esquerda: 99px; Origin de transformação: fundo central; } #min {altura: 60px; Largura: 3px; Antecedentes: #001afe; Posição: Absoluto; topo: 40px; Esquerda: 99px; Origin de transformação: fundo central; Transformar: girar (15deg); } #sec {altura: 70px; Largura: 2px; Antecedentes: #000; Posição: Absoluto; TOP: 30px; Esquerda: 99px; Origin de transformação: fundo central; } #dot {width: 10px; Altura: 10px; Posição: Absoluto; Esquerda: 95px; Top: 95px; Antecedentes: #AAA; Radio de fronteira: 50%; } </style> </head> <body> <div id = "relógio"> <ul> </ul> <div id = "hour"> </div> <div id = "min"> </div> <div id = "sec"> </div> <div id = "dot"> </div> </divhript> var oCSSs = var oclock = document.getElementById ("relógio"); var al = oclock.getElementsByTagName ("ul") [0]; var ohour = document.getElementById ("hora"); var omin = document.getElementById ("min"); var asec = document.getElementById ("sec"); var strli = ""; var strcss = ""; for (var i = 0; i <60; i ++) {strli+= "<li> </li>"; } Oul.innerhtml = strli; for (var i = 0; i <60; i ++) {strcss+= '#relógio ul li: nó de tipo ('+(i+1)+') {transform: girtate ('+i*6+'deg);}'; } ocss.innerhtml+= strcss; tempo(); setInterval (tempo, 1000); função time () {var date = new Date (); var h = date.gethours (); var m = date.getminutes (); var s = date.getSeconds (); ohour.style.transform = "girate ("+(h+m/60)*30+"deg)"; omin.style.transform = "girate ("+(m+s/60)*6+"deg)"; asec.style.Transform = "Girar ("+S*6+"deg)"; } </script> </body> </html>A coisa mais importante em desenhar com tags é o posicionamento, porque dessa maneira podemos colocar a caixa que foi formada em forma na posição que você deseja. A folha de estilo CSS interna pode ser obtida obtendo elementos, para que você possa adicionar estilos a ela usando o InnerHTML e adicione -os em um loop. Também existem muitas escalas, para que você possa usar o Loop para adicionar, o que economiza tempo e esforço. Quanto ao tempo restante, você pode executar a função a cada 1 segundo, para que ela se mova.
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.