<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
  
  <div style="width: 300px;height: 200px;background-color: #EEE;" id="divid"></div>
  <!-- 定时器 -->
  <!-- 1.setTimeout ->一次性的 -->
  <script type="text/javascript">
    var timer1;
    function timeout(){
      timer1 = window.setTimeout("f1()",1000);
    }
    function f1(){
      document.getElementById("divid").innerHTML += "1";
    }
    function closetimeout(){
      window.clearTimeout(timer1);
    }
  </script>
  <!-- 2.setInterval ->周期性的 -->
  <script type="text/javascript">
    var timer2;
    function interval(){
      timer2 = window.setInterval("f2()",1000);
    }
    function f2(){
      document.getElementById("divid").innerHTML += "2";
    }
    function closeinterval(){
      window.clearInterval(timer2);
    }
  </script>
  
  <br><br><br>
  <input type="button" οnclick="timeout()" value="开启一次性定时器">
      
  <input type="button" οnclick="closetimeout()" value="关闭一次性定时器">
  
  <br><br><br>
  <input type="button" οnclick="interval()" value="开启周期性定时器">
      
  <input type="button" οnclick="closeinterval()" value="关闭周期性定时器">
</body>
</html>


JavaScript--定时器_setinterval