效果展示：http://演示。JB 51。net/js/2016/js _气垫树颜色时间/

源码下载：http://小哉。JB 51。net/201612/马援/气垫树颜色时间_jb51.rar

数字采用漂亮的糖果皮肤设计

效果图：

代码如下：

！DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/meta name=' viewport ' content=' width=device-width，initial-scale=1'/titlejs多彩的数字时钟_何问起/title base target=' _ blank '/style a { color : blue；}/style/headbody divh1JS实现多彩的数字时钟/h1/div div id=' time '/div div br/br/a href=' http://悬停树。' com '何问起/a a href=' http://悬停树。com/h/bjaf/o0yqj1ly。' htm '说明/a a href=' http://悬停树。com/肖特/特效/a/div脚本函数getTime(){ var Date=new Date()；var hours=格式化时间(日期。gethours())；var分钟=格式化时间(日期。getminutes())；定义变量秒=格式化时间(日期。getseconds())；var $ time=文档。getelementbyid(' time ')；时间。inner html=hours ' img src=' images/hm。png ' style=' margin 33600 10pxwidth=' 12 ' height=' 40 '/min ' img style=' margin 33600 10px；src='images/ms.png '宽度='12 '高度='40'/秒；setTimeout('getTime()'，500)；}函数格式化时间(I){ if(i10i==1){ I=' img src=' images/0。png ' width=' 40 ' height=' 60 '/img src=' images/1。png ' width=' 20 ' height=' 60 '/'；}else if(i10i！=1){ I=' img src=' images/0。png ' width=' 40 ' height=' 60 '/img src=' images/' I ' .png ' width=' 40 ' height=' 60 '/'；}else{ var j=i.toString().charAt(0)；var z=i.toString().charAt(1)；if(j10 z10j！=1z！=1){ i='img src='images/' j ' .png ' width=' 40 ' height=' 60 '/img src=' images/' z ' .png ' width=' 40 ' height=' 60 '/'；}else if(j10 z10j==1z！=1){ I=' img src=' images/1。png ' width=' 20 ' height=' 60 '/img src=' images/' z ' .png ' width=' 40 ' height=' 60 '/'；}else if(j10 z10z==1j！=1){ i='img src='images/' j ' .png ' width=' 40 ' height=' 60 '/img src=' images/1。png ' width=' 20 ' height=' 60 '/'；} else if(j10 z10(j==1z==1)){ I=' img src=' images/1。png ' width=' 20 ' height=' 60 '/img src=' images/1。png ' width=' 20 ' height=' 60 '/'；} }返回我；} GetTime()；/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！