1
2
3
4
5
6
7
8
9
10
11
12
.
<html> <head> <title>网页特效---纯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>