標籤：
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
計時器——塊移動
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
