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

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

效果图：

实现代码：

！DOCTYPE htmlhtml标题流动时间/title style type=' text/CSS ' # DivH，#divM，# DivS { font-family : consal线高： 30px绝对位置：左： 0px宽度： 5760 px颜色：白色；} # DivH {底色： # 606；} # DivM {底色： # 060；} # divS {底色： # 006；} #divH div，#divM div，# divS div { float:左边框-右边框：实心1px灰色；文本对齐：中心；}/style/head body div style=' font-family : arial；宽度width :400 px ' font-size :24 px；div id=' div time ' style=' text-align : center；线高：1.5 time/div div style=' outline : solid 5px gray；位置：相对；飞越：隐藏；'height :90 px ' div id=' DivH ' style=' top :0 px；'/div div id=' DivM ' style=' top :30 px；'/div div id=' div s ' style=' top :60 px；'/div div id=' DivLine ' style=' position : absolute；top:0px左侧：50%;边框-左侧：实心1px红色；'高度：90px'/div /div /div脚本类型=' text/JAVAScript ' var DivH=document。getelementbyid(' DivH ')；var divM=文档。getelementbyid(' DivM ')；var divS=文档。getelementbyid(' DIvs ')；var div time=文档。getelementbyid(' div time ')；var aw=2880 var ww=400 var w=aw/24；for(var I=0；i 48I){ var div=文档。创建元素(' div ')；div。风格。宽度=(w-1)“px”；div.innerHTML=i % 24divh。append child(div)；} w=aw/60；for(var I=0；i 120I){ var div=文档。创建元素(' div ')；div。风格。宽度=(w-1)“px”；div.innerHTML=i % 60divm。append child(div)；} w=aw/60；for(var I=0；i 120I){ var div=文档。创建元素(' div ')；div。风格。宽度=(w-1)“px”；div.innerHTML=i % 60divs。append child(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。GetMixesdivH.style.left=((h 12)？0 :-aw)ww/2(h *-120)-m * 2 ' px '；l=0；达薇姆。风格。左=((米^ 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 '；时间。innerhtml=' Time ' h ' : ' m ' :s；}/脚本/正文/html以上就是本文的全部内容，希望对大家学习爪哇岛描述语言程序设计有所帮助。