JS浏览器对象-计时器

  setInterval用法

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>uvi</title>
 6      <link rel="stylesheet" href="style.css" type="text/css">
 7 </head>
 8 <body>
 9    <button id="btn" onclick="stopTime()">停止按钮</button>
10    <p id="ptime"></p>
11    <script>
12       var mytime = setInterval(function(){
13           getTime();
14       }, 1000);
15       function getTime(){
16           var d = new Date();
17           var t = d.toLocaleTimeString();
18           document.getElementById("ptime").innerHTML=t;
19       }
20       function stopTime(){
21           clearInterval(mytime);
22       }
23    </script>
24    
25 </body>
26 </html>

 

setTimeout用法

     执行一次

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>uvi</title>
 6      <link rel="stylesheet" href="style.css" type="text/css">
 7 </head>
 8 <body>
 9    <button id="btn" onclick="myWin()">执行按钮</button>
10    <script>
11      var win;
12      function myWin(){//执行一次
13          win = setTimeout(function(){
14              alert("hello");
15          }, 3000);
16      }
17    </script>
18    
19 </body>
20 </html>

  循环执行

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>uvi</title>
 6      <link rel="stylesheet" href="style.css" type="text/css">
 7 </head>
 8 <body>
 9    <button id="btn" onclick="myWin()">执行按钮</button>
10    <script>
11      var win;
12      function myWin(){//执行一次
13          alert("hello");
14          win = setTimeout(function(){
15              myWin();
16          }, 3000);
17      }
18    </script>
19    
20 </body>
21 </html>

停止操作

clearTimeout(win);

 

posted @ 2016-08-10 11:14  UniqueColor  阅读(243)  评论(0)  编辑  收藏  举报