大家好,又见面了,我是全栈君。
基本思路:样式要是绝对定位,不然的话根本走不起来。当开启一个定时器的时候。必须先清除定时器。这是为了防止鼠标连续点击button而开启多个定时器,导致物体的速度加快等原因,其次要控制好物体的运动和停止。用if-else控制逻辑控制。
<!DOCTYPE HTML> <!-- --> <html> <head> <meta charset="utf-8"> <title></title> <style> #div1{ width:200px; height:200px; background:red; position:absolute;//不加绝对定位,就跑不起来 top:50px; left:0px; } </style> <script> var timer=null; function startMove(){ var oDiv=document.getElementById('div1'); clearInterval(timer);//保证仅仅有一个定时器在工作,不会由于连续点击多次按钮而开启多个定时器,从而导致速度变快 timer=setInterval(function (){ var speed=1; if(oDiv.offsetLeft>=300)//大于300时让物体停在那里,不一直运动下去 { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+speed+'px'; } },30) } </script> </head> <body> <input id="btn1" type="button" value="開始运动" onclick="startMove()"/> <div id="div1"></div> </body> </html>
效果图:
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/115772.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...