Este artículo comparte el código de implementación del tiempo móvil JS para su referencia. El contenido específico es el siguiente
Imagen de reproducción:
Código de implementación:
<! DOCTYPE HTML> <html> <fead> <title> JS Flow Time </title> <style type = "text/css"> #divh, #divm, #divs {font-family: consal; Línea de altura: 30px; Posición: Absoluto; Izquierda: 0px; Ancho: 5760px; Color: blanco; } #Divh {Background-Color: #606; } #Divm {Background-Color: #060; } #Divs {Background-Color: #006; } #divh div, #divm div, #divs div {float: izquierda; Border-Right: Solid 1px Grey; Text-Align: Center; } </style> </head> <body> <div style = "font-family: arial; ancho: 400px; font-size: 24px;"> <div id = "Divtime" style = "text-align: center; line-espera: 1.5;"> tiempo </div> <div style = "Outline: solk 5px Gray; posición: relativo; relativo; hidden; hidden; 90px; 90px; id = "divh" style = "top: 0px;"> </div> <div id = "divm" style = "top: 30px;"> </div> <div id = "divs" style = "top: 60px;"> </div> <divi ID = "Divline" style = "Posición: absoluto; top: 0px; izquierda: 50%; border-left: solid 1px; altura: 90px; </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 (ejecutar, 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>Lo anterior se trata de este artículo, espero que sea útil para todos aprender la programación de JavaScript.