js流动式效果显示当前系统时间

2019-11-20 10:03:06

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js流动式时间的实现代码，供大家参考，具体内容如下

效果图：

实现代码：

<!DOCTYPE html><html> <head>  <title>js流动时间</title>  <style type="text/css">   #divH,   #divM,   #divS {    font-family: consal;    line-height: 30px;    position: absolute;    left: 0px;    width: 5760px;    color: white;   }   #divH {    background-color: #606;   }   #divM {    background-color: #060;   }   #divS {    background-color: #006;   }   #divH div,   #divM div,   #divS div {    float: left;    border-right: solid 1px gray;    text-align: center;   }  </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:relative; overflow:hidden; height:90px;">    <div 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:absolute; top:0px; left:50%; border-left:solid 1px red; height:90px;"></div>   </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>

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

上一篇：JS闭包、作用域链、垃圾回收、内存泄露相关知识小结

下一篇：JavaScript禁止复制与粘贴的实现代码