1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>定时器</title> 5 <style type='text/css'> 6 #box {width:80px; height:80px; background:#f00; position:absolute; left:50px; top:50px;} 7 </style> 8 <script> 9 var $time; 10 function $(id){ 11 return document.getElementById(id); 12 } 13 function start(){ 14 $("span").innerHTML=parseInt($("span").innerHTML)+1; 15 $time=setTimeout('start()',1000); 16 } 17 window.onload = function() { 18 $("start").onclick=function(){ 19 start(); 20 } 21 $("end").onclick=function(){ 22 //取消定时器 23 clearTimeout($time); 24 $("span").innerHTML=1; 25 } 26 } 27 </script> 28 </head> 29 <body> 30 <span id="span">1</span><br/> 31 <input type="button" id="start" value="开始" /><br/> 32 <input type="button" id="end" value="结束" /><br/> 33 </body> 34 </html>
为制作动态时间程序作基础