首页 > 代码库 > 计时器——块移动
计时器——块移动
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>
计时器——块移动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。