在网页上显示一个会移动的透明时钟的代码。。。
2007-11-27 18:08:16 来源:WEB开发网大家有没有去过小熊在线?上面的论坛有一个会随滚动条走的时钟,
而且是透明的,十分好看, 下面公布它的代码,希望对大家有所帮助
<script LANGUAGE=JavaScript>
Zp=670;H=....;H=H.split();M=.....;M=M.split();S=......;S=S.split();Yp=0;Xp=0;Yb=8;Xb=8;d_=12;ns=(document.layers)?1:0;fCol=222222;sCol=ff0000;mCol=0000ee;hCol=green;if (ns){dgts=1 2 3 4 5 6 7 8 9 10 11 12;dgts=dgts.split( );for (i=0;i<d_;i++){document.write(<layer name=nsDigits+i+ top=0 left=0 height=30 width=30><center><font face=Arial,Verdana size=1 color=+fCol+>+dgts[i]+</font></center></layer>);}for (i=0;i<M.length;i++){document.write(<layer name=ny+i+ top=0 left=0 bgcolor=+mCol+ clip=0,0,2,2></layer>);}for (i=0;i<H.length;i++){document.write(<layer name=nz+i+ top=0 left=0 bgcolor=+hCol+ clip=0,0,2,2></layer>);}for (i=0;i<S.length;i++){document.write(<layer name=nx+i+ top=0 left=0 bgcolor=+sCol+ clip=0,0,2,2></layer>);}}else{document.write(<div style=position:absolute;top:0px;left:0px><div style=position:relative>);for (i=1;i<d_+1;i++){document.write(<div id=ieDigits style=position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial,Verdana;font-size:10px;color:+fCol+;text-align:center;padding-top:10px>+i+</div>);}document.write(</div></div>);document.write(<div style=position:absolute;top:0px;left:0px><div style=position:relative>);for (i=0;i<M.length;i++){document.write(<div id=y style=position:absolute;width:2px;height:2px;font-size:2px;background:+mCol+></div>);}document.write(</div></div>);document.write(</div></div>);document.write(<div style=position:absolute;top:0px;left:0px><div style=position:relative>);for (i=0;i<H.length;i++){document.write(<div id=z style=position:absolute;width:2px;height:2px;font-size:2px;background:+hCol+></div>);}document.write(</div></div>);document.write(<div style=position:absolute;top:0px;left:0px><div style=position:relative>);for (i=0;i<S.length;i++){document.write(<div id=x style=position:absolute;width:2px;height:2px;font-size:2px;background:+sCol+></div>);}document.write(</div></div>);}function clock(){time=new Date ();secs=time.getSeconds();sec=-1.57+Math.PI*secs/30;mins=time.getMinutes();min=-1.57+Math.PI*mins/30;hr=time.getHours();hrs=-1.57+Math.PI*hr/6+Math.PI*parseInt(time.getMinutes())/360;if (ns){Yp=window.pageYOffset+window.innerHeight-60;Xp=80;}else{Yp=document.body.scrollTop+window.document.body.clientHeight-60;Xp=document.body.scrollLeft+60;}if (ns){for (i=0;i<d_;++i){document.layers[nsDigits+i].top=Yp-5+40*Math.sin(-0.49+d_+i/1.9);document.layers[nsDigits+i].left=Xp-15+40*Math.cos(-0.49+d_+i/1.9);}for (i=0;i<S.length;i++){document.layers[nx+i].top=Yp+i*Yb*Math.sin(sec);document.layers[nx+i].left=Xp+i*Xb*Math.cos(sec);}for (i=0;i<M.length;i++){document.layers[ny+i].top=Yp+i*Yb*Math.sin(min);document.layers[ny+i].left=Xp+i*Xb*Math.cos(min);}for (i=0;i<H.length;i++){document.layers[nz+i].top=Yp+i*Yb*Math.sin(hrs);document.layers[nz+i].left=Xp+i*Xb*Math.cos(hrs);}}else{for (i=0;i<d_;++i){ieDigits[i].style.pixelTop=Yp-15+40*Math.sin(-0.49+d_+i/1.9);ieDigits[i].style.pixelLeft=Xp-14+40*Math.cos(-0.49+d_+i/1.9)+Zp;}for (i=0;i<S.length;i++){x[i].style.pixelTop=Yp+i*Yb*Math.sin(sec);x[i].style.pixelLeft=Xp+i*Xb*Math.cos(sec)+Zp;}for (i=0;i<M.length;i++){y[i].style.pixelTop=Yp+i*Yb*Math.sin(min);y[i].style.pixelLeft=Xp+i*Xb*Math.cos(min)+Zp;}for (i=0;i<H.length;i++){z[i].style.pixelTop=Yp+i*Yb*Math.sin(hrs);z[i].style.pixelLeft=Xp+i*Xb*Math.cos(hrs)+Zp;}}setTimeout(clock(), 50);}
if (document.layers ¦¦ document.all) {window.onload=clock;}
window.onload=clock;
</script>
只要把这段代码放入你的<body> </body>之间就可以了,如果有问题,再和我联系
我的邮箱是tawe@sina.com.cn
这是我问一个高手,他告诉我的,我试过了,效果十分的好!
更多精彩
赞助商链接