定时器 setTimeout setInterval

1.代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script language="javascript">
 
   $(function(){
     var i = 0;
     var timeoutID,timeoutID2;
     function a(){
      i+=1;
      $("#sp").html("计时（秒）："+i);
      timeoutID = setTimeout(a,1000);  
     }
     a();
     $("#bt").click(function(){
      alert(i);
     clearTimeout(timeoutID) ;
     });
     $("#bt1").click(function(){
     alert(i);
     a() ;
     });
      timeoutID2 = setInterval(b,1000);
     function b(){
      var now = new Date();
       $("#sp1").html('时间：'+now.toString());
 
     }
     $("#btn").click(function(){
     clearTimeout(timeoutID2) ;
     });
     $("#btn1").click(function(){
      timeoutID2 = setInterval(b,1000);
     });
    
   })
  </script>
</head>
<body>
  <input type="button"  id="bt" value="计时停止"/>
  <input type="button"  id="bt1" value="计时继续"/>
  <span id="sp"></span>
   <br/>
  <input type="button"  id="btn" value="时间停止"/>
  <input type="button"  id="btn1" value="时间继续"/>
  <span id="sp1"></span>
</body>
</html>
2.效果

posted @ 2012-03-27 12:01  shuaisam  阅读(168)  评论(0)    收藏  举报