网页小挂钟特效，js结合图片实现的牛X代码

发布时间：2018-08-15 23:30 所属栏目：121 来源：站长网

导读：Java Script写的小挂钟特效，乍一看到这个小时钟，感觉作者太牛X了，就像Flash一样，用了几张修饰图片，只需控制钟的指针的转动，钟面是一幅图，钟的样式可以任意替换。但是想在页面上改变钟的位置，比较麻烦。因为，对页面元素的定位用的是绝对定位。语

　　JavaScript写的小挂钟特效，乍一看到这个小时钟，感觉作者太牛X了，就像Flash一样，用了几张修饰图片，只需控制钟的指针的转动，钟面是一幅图，钟的样式可以任意替换。但是想在页面上改变钟的位置，比较麻烦。因为，对页面元素的定位用的是绝对定位。

　　语言是苍白的，只有演示才能让你看到真正的效果！

<HTML> <HEAD> <title>JavaScript小挂钟，可换样式</title> <SCRIPT LANGUAGE="JavaScript">  </script> <style> .num {color:white;width:30px;text-align:right; } </style> </HEAD> <body onLoad="javascript:startClock();"> <div id="c0" style="position:absolute;left:38;top:36;z-index:2;"> <table border=0> <tr> <td width=120 height=120 background="/uploads/allimg/1101/clockbg.gif"> </td> </tr> </table> </div> <div id="ob0" class="num" style="position:absolute;left:-22;top:-20;z-index:1"></div> <div id="ob1" class="num" style="position:absolute;left:-22;top:-20;z-index:8"> <font size="+3" color="#0000ff"><b>.</b></font></div> <div id="ob2" class="num" style="position:absolute;left:-22;top:-20;z-index:8"> <font size="+3" color="#0000ff"><b>.</b></font></div> <div id="ob3" class="num" style="position:absolute;left:-22;top:-20;z-index:8"> <font size="+3" color="#0000ff"><b>.</b></font></div> <div id="ob4" class="num" style="position:absolute;left:-22;top:-20;z-index:8"> <font size="+3" color="#0000ff"><b>.</b></font></div> <div id="ob5" class="num" style="position:absolute;left:-22;top:-20;z-index:8"> <font size="+3" color="#0000ff"><b>.</b></font></div> <div id="ob6" class="num" style="position:absolute;left:-22;top:-20;z-index:7"> <font size="+3" color="#00ffff"><b>.</b></font></div> <div id="ob7" class="num" style="position:absolute;left:-22;top:-20;z-index:7"> <font size="+3" color="#00ffff"><b>.</b></font></div> <div id="ob8" class="num" style="position:absolute;left:-22;top:-20;z-index:7"> <font size="+3" color="#00ffff"><b>.</b></font></div> <div id="ob9" class="num" style="position:absolute;left:-22;top:-20;z-index:7"> <font size="+3" color="#00ffff"><b>.</b></font></div> <div id="ob10" class="num" style="position:absolute;left:-22;top:-20;z-index:6"> <font size="+3" color="#ffff00"><b>.</b></font></div> <div id="ob11" class="num" style="position:absolute;left:-22;top:-20;z-index:6"> <font size="+3" color="#ffff00"><b>.</b></font></div> <div id="ob12" class="num" style="position:absolute;left:-22;top:-20;z-index:6"> <font size="+3" color="#ffff00"><b>.</b></font></div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）