js运动技术--匀速运动

xiaoxiao2021-02-28 110

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #div1 {height: 200px;width: 200px;background: red;top: 50px;left: 0px;position: absolute;}//position必须是absolute </style> <script> var times; window.onclick = function(){ var oBtn = document.getElementById("btn1"); var oDiv = document.getElementById("div1"); oBtn.onclick = function(){ var speed = 4; clearInterval(times);//保证多次点击时同一时间只有一个定时器响应 times = setInterval(function(){ if(oDiv.offsetLeft < 500 ){ oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } else{ clearInterval(times); } },30); }; } </script> </head> <body> <input id = "btn1" type = "button" value = "开始运动"/><br><br> <div id = "div1"> </div> </body> </html>

2、匀速运动的停止条件：绝对值函数abs的使用

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #div1 {height: 200px;width: 200px;background: red;top: 50px;left: 0px;position: absolute;} </style> <script> var times; window.onclick = function(){ var oBtn = document.getElementById("btn1"); var oDiv = document.getElementById("div1"); oBtn.onclick = function(){ var speed = 7; clearInterval(times);//保证多次点击时只有一个定时器响应 times = setInterval(function(){ if(oDiv.offsetLeft == 500 ){ clearInterval(times); } else if(Math.abs(oDiv.offsetLeft - 500) < 7){ oDiv.style.left = 500 + 'px'; }else { oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } },30); }; } </script> </head> <body> <input id = "btn1" type = "button" value = "运动到500"/><br><br> <div id = "div1"> </div> <div style="left: 500px;width: 1px;height: 400px;background: black;position: absolute;"></div> </body> </html>

转载请注明原文地址: https://www.6miu.com/read-47757.html

技术

最新回复(0)