time10.htm

来自「这是一个JAVA的日期时间类,希望能为广大的J友提供方便!」· HTM 代码 · 共 58 行

HTM
58
字号
<HTML>
<HEAD>
<TITLE>程序员大本营--Javascript</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</HEAD>
<BODY BGCOLOR=WHITE LINK=#0033CC>
<p><b><font size="5" color="#660033">
纯JavaScript时钟
</font></b></p> 
 
<FONT FACE="Arial, Helvetica" SIZE=2>
 
<HR NOSHADE SIZE=1> 
 
</FONT> 
 
 
<div align="center">
  <center>
  <table border="0" width="80%" cellspacing="0" cellpadding="0">
    <tr>
      <td width="100%"> <p>
脚本说明:<br>第一步:把如下代码加入&lt;head&gt;区域中:<br>&lt;SCRIPT&nbsp;language=javascript&gt;<br>&lt;!--<br>pX=400;pY=200<br>obs&nbsp;=&nbsp;new&nbsp;Array(13)<br>function&nbsp;ob&nbsp;()&nbsp;{<br>for&nbsp;(i=0;&nbsp;i&lt;13;&nbsp;i++)&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(document.all)&nbsp;obs[i]=new&nbsp;Array&nbsp;(eval('ob'+i).style,-100,-100)<br>&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;obs[i]&nbsp;=&nbsp;new&nbsp;Array&nbsp;(eval('document.ob'+i),-100,-100)<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>}<br>function&nbsp;cl(a,b,c){<br>&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(document.all)&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(a!=0)&nbsp;b+=-1<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eval('c'+a+'.style.pixelTop='+(pY+(c)))<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eval('c'+a+'.style.pixelLeft='+(pX+(b)))<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>else{<br>&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(a!=0)&nbsp;b+=10<br>&nbsp;&nbsp;&nbsp;&nbsp;eval('document.c'+a+'.top='+(pY+(c)))<br>&nbsp;&nbsp;&nbsp;&nbsp;eval('document.c'+a+'.left='+(pX+(b)))<br>}<br>if&nbsp;(document.all)&nbsp;c0.style.pixelLeft=26<br>}<br><br>function&nbsp;runClock()&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(i=0;&nbsp;i&lt;13;&nbsp;i++)&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obs[i][0].left=obs[i][1]+pX<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obs[i][0].top=obs[i][2]+pY<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>}<br><br>var&nbsp;lastsec<br>function&nbsp;timer()&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;time&nbsp;=&nbsp;new&nbsp;Date&nbsp;()<br>&nbsp;&nbsp;&nbsp;&nbsp;sec&nbsp;=&nbsp;time.getSeconds()<br>&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(sec!=lastsec)&nbsp;{<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastsec&nbsp;=&nbsp;sec<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sec=Math.PI*sec/30<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min=Math.PI*time.getMinutes()/30<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hr&nbsp;=Math.PI*((time.getHours()*60)+time.getMinutes())/360<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(i=1;i&lt;6;i++)&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obs[i][1]&nbsp;=&nbsp;Math.sin(sec)&nbsp;*&nbsp;(44&nbsp;-&nbsp;(i-1)*11)-16;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(document.layers)obs[i][1]+=10;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obs[i][2]&nbsp;=&nbsp;-Math.cos(sec)&nbsp;*&nbsp;(44&nbsp;-&nbsp;(i-1)*11)-27;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(i=6;i&lt;10;i++)&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obs[i][1]&nbsp;=&nbsp;Math.sin(min)&nbsp;*&nbsp;(40&nbsp;-&nbsp;(i-6)*10)-16;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(document.layers)obs[i][1]+=10;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obs[i][2]&nbsp;=&nbsp;-Math.cos(min)&nbsp;*&nbsp;(40&nbsp;-&nbsp;(i-6)*10)-27;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(i=10;i&lt;13;i++)&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obs[i][1]&nbsp;=&nbsp;Math.sin(hr)&nbsp;*&nbsp;(37&nbsp;-&nbsp;(i-10)*11)-16;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(document.layers)obs[i][1]+=10;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obs[i][2]&nbsp;=&nbsp;-Math.cos(hr)&nbsp;*&nbsp;(37&nbsp;-&nbsp;(i-10)*11)-27;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br><br>}<br>function&nbsp;setNum(){<br><br>cl&nbsp;(0,-67,-65);<br>cl&nbsp;(1,10,-51);<br>cl&nbsp;(2,28,-33);<br>cl&nbsp;(3,35,-8);<br>cl&nbsp;(4,28,17);<br>cl&nbsp;(5,10,35);<br>cl&nbsp;(6,-15,42);<br>cl&nbsp;(7,-40,35);<br>cl&nbsp;(8,-58,17);<br>cl&nbsp;(9,-65,-8);<br>cl&nbsp;(10,-58,-33);<br>cl&nbsp;(11,-40,-51);<br>cl&nbsp;(12,-16,-56);<br><br>}<br><br>//--&gt;<br><br><br>&lt;/SCRIPT&gt;<br><br><br>第二步:把&lt;body&gt;中加入如下代码:<br>&lt;div&nbsp;id="c0"&nbsp;style="position:absolute;right:6;top:6;&nbsp;z-index:2;"&gt;&nbsp;<br>&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="c1"&nbsp;style="position:absolute;left:20;top:-20;&nbsp;z-index:5;font-size:11px;"&gt;&lt;b&gt;1&lt;/b&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="c2"&nbsp;style="position:absolute;left:20;top:-20;&nbsp;z-index:5;font-size:11px;"&gt;&lt;b&gt;2&lt;/b&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="c3"&nbsp;style="position:absolute;left:20;top:-20;&nbsp;z-index:5;font-size:11px;"&gt;&lt;b&gt;3&lt;/b&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="c4"&nbsp;style="position:absolute;left:20;top:-20;&nbsp;z-index:5;font-size:11px;"&gt;&lt;b&gt;4&lt;/b&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="c5"&nbsp;style="position:absolute;left:20;top:-20;&nbsp;z-index:5;font-size:11px;"&gt;&lt;b&gt;5&lt;/b&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="c6"&nbsp;style="position:absolute;left:20;top:-20;&nbsp;z-index:5;font-size:11px;"&gt;&lt;b&gt;6&lt;/b&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="c7"&nbsp;style="position:absolute;left:20;top:-20;&nbsp;z-index:5;font-size:11px;"&gt;&lt;b&gt;7&lt;/b&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="c8"&nbsp;style="position:absolute;left:20;top:-20;&nbsp;z-index:5;font-size:11px;"&gt;&lt;b&gt;8&lt;/b&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="c9"&nbsp;style="position:absolute;left:20;top:-20;&nbsp;z-index:5;font-size:11px;"&gt;&lt;b&gt;9&lt;/b&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="c10"&nbsp;style="position:absolute;left:20;top:-20;&nbsp;z-index:5;font-size:11px;"&gt;&lt;b&gt;10&lt;/b&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="c11"&nbsp;style="position:absolute;left:20;top:-20;&nbsp;z-index:5;font-size:11px;"&gt;&lt;b&gt;11&lt;/b&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="c12"&nbsp;style="position:absolute;left:20;top:-20;&nbsp;z-index:5;font-size:11px;"&gt;&lt;b&gt;12&lt;/b&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="ob0"&nbsp;style="position:absolute;left:-20;top:-20;z-index:1"&gt;&nbsp;&nbsp&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="ob1"&nbsp;style="position:absolute;left:-20;top:-20;z-index:8"&gt;&nbsp;&lt;font&nbsp;size="+3"&nbsp;color="#0000FF"&gt;&lt;b&gt;.&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="ob2"&nbsp;style="position:absolute;left:-20;top:-20;z-index:8"&gt;&nbsp;&lt;font&nbsp;size="+3"&nbsp;color="#0000FF"&gt;&lt;b&gt;.&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="ob3"&nbsp;style="position:absolute;left:-20;top:-20;z-index:8"&gt;&nbsp;&lt;font&nbsp;size="+3"&nbsp;color="#0000FF"&gt;&lt;b&gt;.&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="ob4"&nbsp;style="position:absolute;left:-20;top:-20;z-index:8"&gt;&nbsp;&lt;font&nbsp;size="+3"&nbsp;color="#0000FF"&gt;&lt;b&gt;.&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="ob5"&nbsp;style="position:absolute;left:-20;top:-20;z-index:8"&gt;&nbsp;&lt;font&nbsp;size="+3"&nbsp;color="#0000FF"&gt;&lt;b&gt;.&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="ob6"&nbsp;style="position:absolute;left:-20;top:-20;z-index:7"&gt;&nbsp;&lt;font&nbsp;size="+3"&nbsp;color="#00FFFF"&gt;&lt;b&gt;.&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="ob7"&nbsp;style="position:absolute;left:-20;top:-20;z-index:7"&gt;&nbsp;&lt;font&nbsp;size="+3"&nbsp;color="#00FFFF"&gt;&lt;b&gt;.&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="ob8"&nbsp;style="position:absolute;left:-20;top:-20;z-index:7"&gt;&nbsp;&lt;font&nbsp;size="+3"&nbsp;color="#00FFFF"&gt;&lt;b&gt;.&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="ob9"&nbsp;style="position:absolute;left:-20;top:-20;z-index:7"&gt;&nbsp;&lt;font&nbsp;size="+3"&nbsp;color="#00FFFF"&gt;&lt;b&gt;.&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="ob10"&nbsp;style="position:absolute;left:-20;top:-20;z-index:6"&gt;&nbsp;&lt;font&nbsp;size="+3"&nbsp;color="#F30000"&gt;&lt;b&gt;.&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="ob11"&nbsp;style="position:absolute;left:-20;top:-20;z-index:6"&gt;&nbsp;&lt;font&nbsp;size="+3"&nbsp;color="#F30000"&gt;&lt;b&gt;.&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="ob12"&nbsp;style="position:absolute;left:-20;top:-20;z-index:6"&gt;&nbsp;&lt;font&nbsp;size="+3"&nbsp;color="#F30000"&gt;&lt;b&gt;.&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;<br><br><br>第三步:把&lt;body&gt;中内容改为:<br>&lt;body&nbsp;bgcolor="#fef4d9"&nbsp;onLoad="ob(),setNum(),setInterval('timer()',100);setInterval('runClock()',100)"&gt;<br>
    </p></td>
    </tr>
  </table>
  </center>
</div>
<hr noshade size=1> 
</BODY>
</HTML>


























⌨️ 快捷键说明

复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?