时间:2021-05-26
本文实例为大家分享了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程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了JS实现网页标题栏显示当前时间和日期的完整代码。分享给大家供大家参考,具体如下:本效果实现在网页的标题栏最前端显示当前的时间和日期,还可以显示星期
本文实例讲述了JS使用Date对象实时显示当前系统时间的方法。分享给大家供大家参考,具体如下:JS中包含Date对象,其提供了一些方法获取系统日期,直接上代码:
本文实例为大家分享了js倒计时时差效果的实现代码,供大家参考,具体内容如下当前系统时间window.onload=function(){showTime();}
js获取当前系统时间 代码如下:varmyDate=newDate();myDate.getYear();//获取当前年份(2位)myDate.getFu
下面是js实时获取并显示当前时间的方法。具体实现方法如下: js部分如下:window.onload=function(){varshow=documen