域名注册
|
虚拟主机
|
数据库
|
设为主页
|
加入收藏
|
天诚搜索
|
RSS
网站套餐
Package
基础特惠型网站
企业标准型网站
企业大户型网站
商务政务型网站
功能单项报价表
最新推荐
Recommended
4年网络创业经历
Dreamweaver表格经验谈
61.183.41.123数据重新上传通…
局域网arp病毒
用途相似的标签
CSS网页标准制作关于网页表单…
中国互联网13年大事记
ECSHOP 显示指定分类下的文章…
您现在的位置:
天诚世纪
>>
技术中心
>>
网页特效
>>
时间日期
>> 正文
纯JavaScript时钟
作者:
天诚世纪
更新时间:2009-6-13 11:13:10
来源:
天诚世纪
以下是HTML网页特效代码,点击运行按钮可查看效果:
<html> <head> <title>网页特效|tc-21.com|---纯JavaScript时钟</title> <style type="text/css">BODY { FONT-FAMILY: "宋体"; FONT-SIZE: 9pt; MARGIN-LEFT: 4px; MARGIN-RIGHT: 0px; MARGIN-TOP: 0px } A { COLOR: black; FONT-SIZE: 13px; FONT-WEIGHT: 400; TEXT-DECORATION: none } A:hover { COLOR: red; FONT-SIZE: 13px; FONT-WEIGHT: 400; TEXT-DECORATION: underline } A:active { COLOR: #ff0033; CURSOR: hand; FONT: 9pt "宋体" } </style> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> <script language="javascript"> <!-- pX=140;pY=160 obs = new Array(13) function ob () { for (i=0; i<13; i++) { if (document.all) obs[i]=new Array (eval('ob'+i).style,-100,-100) else obs[i] = new Array (eval('document.ob'+i),-100,-100) } } function cl(a,b,c){ if (document.all) { if (a!=0) b+=-1 eval('c'+a+'.style.pixelTop='+(pY+(c))) eval('c'+a+'.style.pixelLeft='+(pX+(b))) } else{ if (a!=0) b+=10 eval('document.c'+a+'.top='+(pY+(c))) eval('document.c'+a+'.left='+(pX+(b))) } if (document.all) c0.style.pixelLeft=26 } function runClock() { for (i=0; i<13; i++) { obs[i][0].left=obs[i][1]+pX obs[i][0].top=obs[i][2]+pY } } var lastsec function timer() { time = new Date () sec = time.getSeconds() if (sec!=lastsec) { lastsec = sec sec=Math.PI*sec/30 min=Math.PI*time.getMinutes()/30 hr =Math.PI*((time.getHours()*60)+time.getMinutes())/360 for (i=1;i<6;i++) { obs[i][1] = Math.sin(sec) * (44 - (i-1)*11)-16; if (document.layers)obs[i][1]+=10; obs[i][2] = -Math.cos(sec) * (44 - (i-1)*11)-27; } for (i=6;i<10;i++) { obs[i][1] = Math.sin(min) * (40 - (i-6)*10)-16; if (document.layers)obs[i][1]+=10; obs[i][2] = -Math.cos(min) * (40 - (i-6)*10)-27; } for (i=10;i<13;i++) { obs[i][1] = Math.sin(hr) * (37 - (i-10)*11)-16; if (document.layers)obs[i][1]+=10; obs[i][2] = -Math.cos(hr) * (37 - (i-10)*11)-27; } } } function setNum(){ cl (0,-67,-65); cl (1,10,-51); cl (2,28,-33); cl (3,35,-8); cl (4,28,17); cl (5,10,35); cl (6,-15,42); cl (7,-40,35); cl (8,-58,17); cl (9,-65,-8); cl (10,-58,-33); cl (11,-40,-51); cl (12,-16,-56); } //--> </script> </head> <body onload="ob(),setNum(),setInterval('timer()',100);setInterval('runClock()',100)"> <div id="c0" style="position: absolute; right: 6px; top: 6; z-index: 2; left: 4; width: 536; height: 19"></div><div id="c1" style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><b> <p>1</b></p> </div><div id="c2" style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><b> <p>2</b></p> </div><div id="c3" style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><b> <p>3</b></p> </div><div id="c4" style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><b> <p>4</b></p> </div><div id="c5" style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><b> <p>5</b></p> </div><div id="c6" style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><b> <p>6</b></p> </div><div id="c7" style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><b> <p>7</b></p> </div><div id="c8" style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><b> <p>8</b></p> </div><div id="c9" style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><b> <p>9</b></p> </div><div id="c10" style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><b> <p>10</b></p> </div><div id="c11" style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><b> <p>11</b></p> </div><div id="c12" style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><b> <p>12</b></p> </div><div id="ob0" style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 1"></div><div id="ob1" style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><font color="#0000ff" size="+3"><b> <p>.</b></font></p> </div><div id="ob2" style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><font color="#0000ff" size="+3"><b> <p>.</b></font></p> </div><div id="ob3" style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><font color="#0000ff" size="+3"><b> <p>.</b></font></p> </div><div id="ob4" style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><font color="#0000ff" size="+3"><b> <p>.</b></font></p> </div><div id="ob5" style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><font color="#0000ff" size="+3"><b> <p>.</b></font></p> </div><div id="ob6" style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><font color="#00ffff" size="+3"><b> <p>.</b></font></p> </div><div id="ob7" style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><font color="#00ffff" size="+3"><b> <p>.</b></font></p> </div><div id="ob8" style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><font color="#00ffff" size="+3"><b> <p>.</b></font></p> </div><div id="ob9" style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><font color="#00ffff" size="+3"><b> <p>.</b></font></p> </div><div id="ob10" style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 6"><font color="#f30000" size="+3"><b> <p>.</b></font></p> </div><div id="ob11" style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 6"><font color="#f30000" size="+3"><b> <p>.</b></font></p> </div><div id="ob12" style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 6"><font color="#f30000" size="+3"><b> <p>.</b></font></p> </div> </body> </html> <a href="/ITCenter/effect/">.</a>
[提示:可先修改代码再按运行]
本文链接:http://www.tc-21.com/ITCenter/200906/20090613111310.html
上一篇文章:
极酷的图形钟表
下一篇文章:
爪哇日历
更多关于
时间日期
的新闻
相关文章
农历日历
Form中的时钟
立体显示的时钟
显示特殊节日脚本
退出时显示访问时间
各种风格时间显示
使时钟显示在任意指定的位置
倒计时
::::::
网页模板
|
建站指导
|
视频教程
|
图片中心
|
在线咨询
|
网站运营
|
网站推广
|
图片素材
::::::
CopyRight 2007 All Rights Reserved 天诚世纪 版权所有
鄂ICP备12000046号
联系电话:18995527083 18995527081 QQ:448163207 32301667 Email:my_tc@126.com
::::::搜索关键字:
武汉网站制作
|
武汉做网站
|
武汉网站建设
|
武汉网页制作
|
天诚世纪
|
武汉网页制作公司
|
网页模板
|::::::