Cet article partage le code d'implémentation de JS Mobile Time pour votre référence. Le contenu spécifique est le suivant
Image de reproduction:
Code d'implémentation:
<! Doctype html> <html> <éad- head> <itle> js Time de flux </title> <style type = "text / css"> #divh, #divm, #divs {font-family: consal; hauteur de ligne: 30px; Position: absolue; gauche: 0px; Largeur: 5760px; Couleur: blanc; } #divh {fond-Color: # 606; } #divm {background-Color: # 060; } #Divs {Background-Color: # 006; } #divh div, #divm div, #divs div {float: Left; Border-Dight: Solid 1px gris; Texte-aligne: Centre; } </ style> </ head> <body> <div style = "font-family: arial; width: 400px; font-size: 24px;"> <div id = "divtime" style = "text-align: Center; line-height: 1.5;"> Time </ div> <div style = "Outline: Solid 5px gray; position: relatif; id = "divh" style = "top: 0px;"> </div> <div id = "divm" style = "top: 30px;"> </ div> <div id = "divs" style = "top: 60px;"> </div> <div id = "divline" style = "position: absolu; top: 0px; gauche: 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; pour (var i = 0; i <48; i ++) {var div = document.CreateElement ('div'); div.style.width = (w - 1) + 'px'; div.innerhtml = i% 24; Divh.ApendChild (Div); } w = aw / 60; pour (var i = 0; i <120; i ++) {var div = document.CreateElement ('div'); div.style.width = (w - 1) + 'px'; div.innerhtml = i% 60; Divm.ApendChild (Div); } w = aw / 60; pour (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); fonction 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>Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.