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>