이 기사에서는 참조를위한 JS Mobile Time의 구현 코드를 공유합니다. 특정 내용은 다음과 같습니다
생식 이미지 :
구현 코드 :
<! docType html> <html> <head> <title> js 흐름 시간 </title> <스타일 유형 = "text/css"> #divh, #divm, #divs {font-family : consal; 라인 높이 : 30px; 위치 : 절대; 왼쪽 : 0px; 너비 : 5760px; 색상 : 흰색; } #divh {배경색 : #606; } #divm {배경색 : #060; } #divs {배경색 : #006; } #divh div, #divm div, #divs div {float : 왼쪽; 테두리 오른쪽 : 단단한 1px 회색; 텍스트 정렬 : 센터; } </style> </head> <body> <div style = "font-family : arial; width : 400px; font-size : 24px;"> <div id = "divtime"style = "텍스트-정렬 : 중심; 라인-하이이트 : 1.5;"> time </div> <div style = "개요 : 고체 5px 그레이; id = "divh"style = "top : 0px;"> </div> <div id = "divm"style = "top : 30px;"> </div> <div id = "divs"style = "top : 60px;"> </div> <div id = "divline"style = "post : 0px; left : 50%;"/divf; </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); 함수 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>위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.