Este artigo compartilha o código de implementação do tempo móvel js para sua referência. O conteúdo específico é o seguinte
Imagem de reprodução:
Código de implementação:
<! Doctype html> <html> <head> <title> JS Time de fluxo </title> <style type = "text/css"> #divh, #divm, #divs {font-family: consal; altura de linha: 30px; Posição: Absoluto; Esquerda: 0px; Largura: 5760px; Cor: Branco; } #Divh {Background-Color: #606; } #Divm {Background-Color: #060; } #Divs {Background-Color: #006; } #divh div, #divm div, #divs div {float: esquerda; Fronteira: Solid 1px cinza; Alinhamento de texto: centro; } </style> </ad Head> <body> <div style = "Font-family: Arial; largura: 400px; font-size: 24px;"> <div id = "divtime" style = "text-align: Centern; id = "divh" style = "top: 0px;"> </div> <div id = "divm" style = "top: 30px;"> </div> <div id = "divs" style = "top: 60px;"> </div> <bordafft-ler = "divline" style = ": absoluta: top: 0px; esquerda: 50%; </div> </div> <script type = "text/javascript"> var divh = document.getElementById ('divh'); var divm = document.getElementById ('divm'); var divs = document.getElementById ('divs'); var divtime = document.getElementById ('divtime'); var aw = 2880; var ww = 400; var w = aw / 24; for (var i = 0; i <48; i ++) {var div = document.createElement ('div'); div.style.width = (w - 1) + 'px'; div.innerhtml = i % 24; Divh.appendChild (div); } w = aw / 60; for (var i = 0; i <120; i ++) {var div = document.createElement ('div'); div.style.width = (w - 1) + 'px'; div.innerhtml = i % 60; divm.appendChild (div); } w = aw / 60; for (var i = 0; i <120; i ++) {var div = document.createElement ('div'); div.style.width = (w - 1) + 'px'; div.innerhtml = i % 60; divs.appendChild (div); } window.setInterval (Run, 20); function run () {var dt = new Date (); var h = dt.gethours (); var m = dt.getminutes (); var s = dt.getSeconds (); var f = dt.getMillisEconds (); divh.style.left = ((h> 12)? 0: -aw) + ww / 2 + (h * -120) -m * 2 + 'px'; l = 0; divm.style.left = ((m> 30)? 0: -aw) + ww / 2 + (m * -48) -s / 1.2 + 'px'; l = 0; divs.style.left = ((s> 30)? 0: -aw) + ww / 2 + (s * -48) -f * 48 /1000 + 'px'; divtime.innerhtml = 'time' + h + ':' + m + ":" + s; } </script> </body> </html>O exposto acima é tudo sobre este artigo, espero que seja útil para todos aprenderem a programação de JavaScript.