在网页上显示一个会移动的透明时钟的代码。。。

原创 2001年08月21日 09:38:00

大家有没有去过小熊在线?上面的论坛有一个会随滚动条走的时钟,

而且是透明的,十分好看, 下面公布它的代码,希望对大家有所帮助

<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 &brvbar;&brvbar; document.all) {window.onload=clock;}
window.onload=clock;
</script>

 

只要把这段代码放入你的<body> </body>之间就可以了,如果有问题,再和我联系

我的邮箱是tawe@sina.com.cn

这是我问一个高手,他告诉我的,我试过了,效果十分的好!

HTML5 简单页面实现时钟效果

界面显示: html代码: JSP Page canvas{ border...
  • u012716909
  • u012716909
  • 2016年05月19日 10:31
  • 2891

JS-有意思的人形时钟

分享自:http://chabudai.org/blog/?p=59 在这个网站看到一个很有意思的人形的时钟,分享一下,感觉很好玩的样子...
  • rsylqc
  • rsylqc
  • 2015年04月01日 15:50
  • 862

五步教你制作漂亮精致的HTML时钟

学了一段时间的HTML、CSS和JS后,给大家做一款漂亮的不像实力派的HTML时钟,先看图: 涉及到的知识点有: CSS3动画、DOM操作、定时器、圆点坐标的计算(好多人是不是已经还给自己的...
  • qq_40041074
  • qq_40041074
  • 2017年11月17日 17:31
  • 253

前端(canvas)圆形网页时钟实现,源码

欢迎来到Altaba的博客 2017年1月23日 canvas画出图案,网页时钟,不废话,源码奉上,望借鉴者多点思考,前端乐趣无穷 JSP Page时针 ca...
  • Altaba
  • Altaba
  • 2017年01月22日 17:41
  • 578

纯JS实现动态时间显示代码

一、 JavaScript获取当前日期时间同时显示星期几,具体代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
  • qq_35893120
  • qq_35893120
  • 2017年04月27日 10:31
  • 1669

图片透明显示和移动

为了搞课程设计,这几天学了一些MFC的知识,因为没有真正的入门学习,而是直接学一下课程设计游戏项目里面要学的一些知识,确实很困难,之前看了孙鑫大神的vc++教程的,但是当时只是想学c++的部分,看到m...
  • u013257679
  • u013257679
  • 2015年05月06日 18:34
  • 292

用java编写的时钟程序

程序运行界面如下:     哈哈,还可以吧,cpu占用率1%不到,下面是开源的代码,仔细看哈! 程序代码如下: package lee; ...
  • evilcry2012
  • evilcry2012
  • 2014年12月11日 20:48
  • 3391

WindowsApi+Easyx图形库的透明时钟

前言:在当了这么久的吸血鬼(学习技术不写博)之后,今天终于决定写一篇属于自己的文章...
  • CoderMannul
  • CoderMannul
  • 2015年07月10日 17:08
  • 589

网页中通过swfobject插入Flash动画以及设置透明

前言今天在浏览网页时候,发现有的网站上既然可以在任意地方插入视频,且可以控制视频的显示范围,瞬间感觉效果还不错,经查看源代码,发现不过是在网站上嵌入flash动画而已,或是在flash中在动态引用外部...
  • hsd2012
  • hsd2012
  • 2016年06月12日 17:40
  • 1717

paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结   响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应...
  • attilax
  • attilax
  • 2014年05月02日 00:34
  • 7706
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在网页上显示一个会移动的透明时钟的代码。。。
举报原因:
原因补充:

(最多只允许输入30个字)