Dieser Artikel teilt den Implementierungscode von JS Mobile Time für Ihre Referenz. Der spezifische Inhalt ist wie folgt
Reproduktionsbild:
Implementierungscode:
<! DocType html> <html> <kopf> <titels> JS Flow Time </title> <style type = "text/css"> #divh, #divm, #divs {font-familie: konsal; Zeilenhöhe: 30px; Position: absolut; links: 0px; Breite: 5760px; Farbe: weiß; } #divh {Hintergrundfarbe: #606; } #divm {Hintergrundfarbe: #060; } #divs {Hintergrundfarbe: #006; } #divh div, #divm div, #divs div {float: links; Grenze-Rechts: Solid 1px Grey; Text-Align: Mitte; } </style> </head> <body> <div style = "Schriftfamilie: Arial; Breite: 400px; Schriftgröße: 24px;"> <div id = "divTime" style = "text-align: center; linie-height: 1,5; id = "divh" style = "top: 0px;"> </div> <div id = "divm" style = "top: 30px;"> </div> <div id = "divs" style = "top: 60px;"> </div> <div id = "divline" style "style" position: absolut; </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 ('divime'); var aw = 2880; var ww = 400; var w = aw / 24; für (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; für (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; für (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); Funktion 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>Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.