时钟

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title><script>var_hmt=_hmt||[];(function(){varhm=document.createElement("script");hm.src="http://hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";vars=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s);})();</script><script>varH='....';varH=H.split('');varM='.....';varM=M.split('');varS='......';varS=S.split('');varYpos=0;varXpos=0;varYbase=8;varXbase=8;vardots=12;functionclock(){vartime=newDate();varsecs=time.getSeconds();varsec=-1.57+Math.PI*secs/30;varmins=time.getMinutes();varmin=-1.57+Math.PI*mins/30;varhr=time.getHours();varhrs=-1.57+Math.PI*hr/6+Math.PI*parseInt(time.getMinutes())/360;for(i=0;i<dots;++i){document.getElementById("dig"+(i+1)).style.top=0-15+40*Math.sin(-0.49+dots+i/1.9).toString()+"px";document.getElementById("dig"+(i+1)).style.left=0-14+40*Math.cos(-0.49+dots+i/1.9).toString()+"px";}for(i=0;i<S.length;i++){document.getElementById("sec"+(i+1)).style.top=Ypos+i*Ybase*Math.sin(sec).toString()+"px";document.getElementById("sec"+(i+1)).style.left=Xpos+i*Xbase*Math.cos(sec).toString()+"px";}for(i=0;i<M.length;i++){document.getElementById("min"+(i+1)).style.top=Ypos+i*Ybase*Math.sin(min).toString()+"px";document.getElementById("min"+(i+1)).style.left=Xpos+i*Xbase*Math.cos(min).toString()+"px";}for(i=0;i<H.length;i++){document.getElementById("hour"+(i+1)).style.top=Ypos+i*Ybase*Math.sin(hrs).toString()+"px";document.getElementById("hour"+(i+1)).style.left=Xpos+i*Xbase*Math.cos(hrs).toString()+"px";}setTimeout('clock()',50);}window.onload=clock;</script><styletype="text/css">div.dig,div.hour,div.min,div.sec{position:absolute;}div.hour,div.min,div.sec{width:2px;height:2px;font-size:2px;}div.dig{width:30px;height:30px;font-family:arial,verdana,sans-serif;font-size:10px;color:#000000;text-align:center;padding-top:10px}div.min{background:#0000FF;}div.hour{background:#000000;}div.sec{background:#FF0000;}</style></head><body><divclass="example"><table><tbody><tr><td><div><divid="dig1"class="dig">1</div><divid="dig2"class="dig">2</div><divid="dig3"class="dig">3</div><divid="dig4"class="dig">4</div><divid="dig5"class="dig">5</div><divid="dig6"class="dig">6</div><divid="dig7"class="dig">7</div><divid="dig8"class="dig">8</div><divid="dig9"class="dig">9</div><divid="dig10"class="dig">10</div><divid="dig11"class="dig">11</div><divid="dig12"class="dig">12</div><divid="hour1"class="hour"></div><divid="hour2"class="hour"></div><divid="hour3"class="hour"></div><divid="hour4"class="hour"></div><divid="min1"class="min"></div><divid="min2"class="min"></div><divid="min3"class="min"></div><divid="min4"class="min"></div><divid="min5"class="min"></div><divid="sec1"class="sec"></div><divid="sec2"class="sec"></div><divid="sec3"class="sec"></div><divid="sec4"class="sec"></div><divid="sec5"class="sec"></div><divid="sec6"class="sec"></div></div></td></tr></tbody></table></div></body></html>


计时器

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title><script>varc1=0;vart=0;vartimer_is_on1=0;functionmyTimer(){t=t+1;document.getElementById("txt").value=t;}functiondoTimer1(){if(!timer_is_on1){timer_is_on1=1;myt=setInterval(function(){myTimer()},1000);}}functionstopCount1(){clearInterval(myt);timer_is_on1=0;}</script></head><body><br><form><inputtype="button"value="开始计数!"onclick="doTimer1()"/><inputtype="text"id="txt"/><inputtype="button"value="停止计数!"onclick="stopCount1()"/></form></body></html>


计时器2

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title><script>varc=0;vart;vartimer_is_on=0;functiontimedCount(){document.getElementById('txt').value=c;c=c+1;t=setTimeout(function(){timedCount()},1000);}functiondoTimer(){if(!timer_is_on){timer_is_on=1;timedCount();}}functionstopCount(){clearTimeout(t);timer_is_on=0;}</script></head><body><form><inputtype="button"value="开始计数!"onclick="doTimer()"/><inputtype="text"id="txt"/><inputtype="button"value="停止计数!"onclick="stopCount()"/></form><p>单击开始计数按钮，按下时开始计数，输入框将从0开始一直计数。单击停止计数按钮，按下时停止计数，再次点击开始计数按钮，又再次开始计数。</p></body></html>