计时器——块移动 

 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>
View Code

 

posted @ 2016-08-28 17:57  舍近求猿  阅读(113)  评论(0)    收藏  举报