纯javascript时钟

　2007-11-27 18:00:41　来源：WEB开发网　闂傚倸鍊搁崐鎼佸磹妞嬪孩顐芥慨姗嗗厳缂傛氨鎲稿鍫罕闂備礁婀遍搹搴ㄥ窗閺嶎偆涓嶆い鏍仦閻撱儵鏌ｉ弴鐐测偓鍦偓姘炬嫹

闂傚倸鍊搁崐鎼佸磹妞嬪海鐭嗗〒姘ｅ亾妤犵偛顦甸弫鎾绘偐閹绘帞鈧參姊哄Ч鍥х仼闁诲繑鑹鹃悾鐑藉蓟閵夛妇鍘甸梺瑙勵問閸犳牠銆傛總鍛婄厱閹艰揪绱曟牎闂侀潧娲ょ€氫即鐛幒妤€绠ｆ繝闈涘暙娴滈箖鏌ｉ姀鈶跺湱澹曟繝姘厵闁绘劦鍓氶悘杈ㄤ繆閹绘帞澧涚紒缁樼洴瀹曞崬螖閸愬啠鍓濈换娑樼暆婵犱胶鏁栫紓浣介哺閹瑰洤鐣烽幒鎴僵闁瑰吀鐒﹂悗鎼佹⒒娴ｇ儤鍤€闁搞倖鐗犻獮蹇涙晸閿燂拷

濠电姷鏁告慨鐑藉极閸涘﹥鍙忔い鎾卞灩缁狀垶鏌涢幇闈涙灈鐎瑰憡绻冮妵鍕箻鐎靛摜鐣奸梺纭咁潐濞茬喎顫忕紒妯肩懝闁逞屽墮宀ｈ儻顦查悡銈夋煏閸繃鍋繛宸簻鎯熼梺瀹犳〃閼冲爼宕濋敃鈧—鍐Χ閸℃鐟愰梺鐓庡暱閻栧ジ宕烘繝鍥у嵆闁靛骏绱曢崢顏堟⒑閹肩偛鍔楅柡鍛⊕缁傛帟顦寸紒杈ㄥ笚濞煎繘鍩℃担閿嬵潟闂備浇妗ㄩ悞锕傚箲閸ヮ剙鏋侀柟鍓х帛閺呮悂鏌ㄩ悤鍌涘闂傚倸鍊搁崐鎼佸磹妞嬪孩顐芥慨姗嗗厳缂傛氨鎲稿鍫罕闂備礁婀遍搹搴ㄥ窗閺嶎偆涓嶆い鏍仦閻撱儵鏌ｉ弴鐐测偓鍦偓姘炬嫹　　闂傚倸鍊搁崐鎼佸磹閻戣姤鍤勯柤鍝ユ暩娴犳氨绱撻崒娆掑厡缂侇噮鍨堕妴鍐川閺夋垹鍘洪悗骞垮劚椤︻垶宕￠幎鑺ョ厪闊洦娲栨牎闂佽瀵掗崜鐔奉潖閾忓湱纾兼俊顖氭惈椤秴顪冮妶鍡楀闁告鍥х叀濠㈣泛谩閻斿吋鐓ラ悗锝庡厴閸嬫挻绻濆顓涙嫼閻熸粎澧楃敮鎺撶娴煎瓨鐓曢柟鎯ь嚟閳藉鏌嶇紒妯荤叆妞ゎ偅绻堥幊婊呭枈濡顏归梻鍌欑閹诧紕绮欓幋锔哄亼闁哄鍨熼弸鏃堟煛閸愶絽浜剧紓浣虹帛缁嬫挻绂掗敃鍌氱＜婵﹩鍓﹂悗鎶芥⒒娴ｅ摜锛嶇紒顕呭灦楠炴垿宕堕鍌氱ウ闁诲函缍嗘禍鏍绩娴犲鐓欓梺顓ㄧ畱婢ь垱銇勯弬鍨偓瑙勭┍婵犲洦鍊锋い蹇撳閸嬫捇寮借濞兼牕鈹戦悩瀹犲闁稿被鍔庨幉姝岀疀濞戞ḿ鐤呴梺鍦檸閸犳寮查幖浣圭叆闁绘洖鍊圭€氾拷

核心提示：脚本说明：第一步:把如下代码加入<head>区域中:<SCRIPT language=javascript><!--pX=400;pY=200obs = new Array(13)function ob () {for (i=0; i<13; i++) { if

脚本说明：
第一步:把如下代码加入<head>区域中:
<SCRIPT language=javascript>
<!--
pX=400;pY=200
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);

}

file://-->

</SCRIPT>

第二步:把<body>中加入如下代码：
<div id=c0 style=position:absolute;right:6;top:6; z-index:2;>
　 </div>
　　　 <div id=c1 style=position:absolute;left:20;top:-20; z-index:5;font-size:11px;><b>1</b></div>
　　　 <div id=c2 style=position:absolute;left:20;top:-20; z-index:5;font-size:11px;><b>2</b></div>
　　　 <div id=c3 style=position:absolute;left:20;top:-20; z-index:5;font-size:11px;><b>3</b></div>
　　　 <div id=c4 style=position:absolute;left:20;top:-20; z-index:5;font-size:11px;><b>4</b></div>
　　　 <div id=c5 style=position:absolute;left:20;top:-20; z-index:5;font-size:11px;><b>5</b></div>
　　　 <div id=c6 style=position:absolute;left:20;top:-20; z-index:5;font-size:11px;><b>6</b></div>
　　　 <div id=c7 style=position:absolute;left:20;top:-20; z-index:5;font-size:11px;><b>7</b></div>
　　　 <div id=c8 style=position:absolute;left:20;top:-20; z-index:5;font-size:11px;><b>8</b></div>
　　　 <div id=c9 style=position:absolute;left:20;top:-20; z-index:5;font-size:11px;><b>9</b></div>
　　　 <div id=c10 style=position:absolute;left:20;top:-20; z-index:5;font-size:11px;><b>10</b></div>
　　　 <div id=c11 style=position:absolute;left:20;top:-20; z-index:5;font-size:11px;><b>11</b></div>
　　　 <div id=c12 style=position:absolute;left:20;top:-20; z-index:5;font-size:11px;><b>12</b></div>
　　　 <div id=ob0 style=position:absolute;left:-20;top:-20;z-index:1> </div>
　　　 <div id=ob1 style=position:absolute;left:-20;top:-20;z-index:8> <font size=+3 color=#0000FF><b>.</b></font></div>
　　　 <div id=ob2 style=position:absolute;left:-20;top:-20;z-index:8> <font size=+3 color=#0000FF><b>.</b></font></div>
　　　 <div id=ob3 style=position:absolute;left:-20;top:-20;z-index:8> <font size=+3 color=#0000FF><b>.</b></font></div>
　　　 <div id=ob4 style=position:absolute;left:-20;top:-20;z-index:8> <font size=+3 color=#0000FF><b>.</b></font></div>
　　　 <div id=ob5 style=position:absolute;left:-20;top:-20;z-index:8> <font size=+3 color=#0000FF><b>.</b></font></div>
　　　 <div id=ob6 style=position:absolute;left:-20;top:-20;z-index:7> <font size=+3 color=#00FFFF><b>.</b></font></div>
　　　 <div id=ob7 style=position:absolute;left:-20;top:-20;z-index:7> <font size=+3 color=#00FFFF><b>.</b></font></div>
　　　 <div id=ob8 style=position:absolute;left:-20;top:-20;z-index:7> <font size=+3 color=#00FFFF><b>.</b></font></div>
　　　 <div id=ob9 style=position:absolute;left:-20;top:-20;z-index:7> <font size=+3 color=#00FFFF><b>.</b></font></div>
　　　 <div id=ob10 style=position:absolute;left:-20;top:-20;z-index:6> <font size=+3 color=#F30000><b>.</b></font></div>
　　　 <div id=ob11 style=position:absolute;left:-20;top:-20;z-index:6> <font size=+3 color=#F30000><b>.</b></font></div>
　　　 <div id=ob12 style=position:absolute;left:-20;top:-20;z-index:6> <font size=+3 color=#F30000><b>.</b></font></div>