1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 *{margin: 0;padding: 0;}
8 #con{width: 100px;height: 100px;background: red;position: absolute;left: 0;top: 100px;}
9 #but{width: 30px;height: 30px;}
10
11 </style>
12 </head>
13 <body>
14 <input id="but" type="button" value="go">
15 <input id="but1" type="button" value="stop">
16 <div id="con"></div>
17
18 <script>
19 /*function as() {
20 alert('aa');
21 };
22 setInterval(as,100)*/
23 var con=document.getElementById('con');
24 var but=document.getElementById('but');
25 var but1=document.getElementById('but1');
26 var l=0;
27 var timer=null,time2=null,time3=null;
28 but.onclick=function() {
29 clearInterval(timer);
30 //每次点击的时候先清掉计时器，再去执行，防止触发多个计时器造成页面混乱
31 timer=setInterval(function() {
32 l+=10;
33 con.style.left=l+'px';
34 },100)
35 };
36 but1.onclick=function() {
37 clearInterval(timer);
38 };
39 // time2=setTimeout(function() {
40 // alert('aa');
41 // },1000)
42 //timeout一次性的计时器可以当做延时效果来用
43 </script>
44 </body>
45 </html>
