点击“开始运动”按钮,红色的#red区块开始向右匀速运动,抵达到黑色竖线位置自动停止,再次点击“开始运动”#red区块也不会再运动。同时为了便于后期维护,要求运动速度可在代码中灵活调整。
细节要求:
1、点击开始运动按钮后,在抵达终点线前,无论再次点击多少次按钮,#red区块均维持运动速率不变。
2、#red区块最后停滞位置不能超出黑色竖线。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>JS小案例:匀速运动</title> <style> #red { width: 200px; height: 200px; background: red; position: absolute; top: 50px; left: 0; } .black { position: absolute; width: 1px; height: 200px; left: 900px; background: black; } </style> <script> //补充代码 </script> </head> <body> <input type='button' value='开始运动' id='btn' /> <div id='red'></div> <div class='black'></div> </body> </html>
参考代码:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>JS小案例:匀速运动</title> <style> #red { width: 200px; height: 200px; background: red; position: absolute; top: 50px; left: 0; } .black { position: absolute; width: 1px; height: 200px; left: 900px; background: black; } </style> <script> window.onload = function () { var oDiv = document.getElementById('red'); var oBtn = document.getElementById('btn'); var timer = null; function startMove() { var speed = 11; var iTarget = 700; /* 点击开始运动按钮后,在抵达终点线前,无论再次点击多少次按钮,#red区块均维持运动速率不变。 *需要确保每次触发点击事件都只有开一个定时器,否则会出现点击越多,运动越快的情况。 */ if (timer) { clearInterval(timer); } timer = setInterval(function () { /* *通过if……else结构避免运动抵达目标后点击按钮,#red区块继续运动。 *要确保运动不超出目标值,需要确保当#red与目标点的距离小于或等于speed值时,运动距离不能为speed,要单独进行设置。 */ if (iTarget - oDiv.offsetLeft < speed && 700 - oDiv.offsetLeft >= 0) { oDiv.style.left = iTarget + 'px'; clearInterval(timer); } else { oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } }, 30); } oBtn.onclick = startMove; } </script> </head> <body> <input type='button' value='开始运动' id='btn' /> <div id='red'></div> <div class='black'></div> </body> </html>
问题代码1:
window.onload = function () { var oDiv = document.getElementById('red'); var oBtn = document.getElementById('btn'); var timer = null; function startMove() { var speed = 11; var iTarget = 700; timer = setInterval(function () { if (iTarget - oDiv.offsetLeft < speed && 700 - oDiv.offsetLeft >= 0) { oDiv.style.left = iTarget + 'px'; clearInterval(timer); } else { oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } }, 30); } oBtn.onclick = startMove; }
这个会出现什么问题?在抵达目标点前,点击按钮会发现#red约跑越快。
问题代码2:
window.onload = function () { var oDiv = document.getElementById('red'); var oBtn = document.getElementById('btn'); var timer = null; function startMove() { var speed = 11; var iTarget = 700; if (timer) { clearInterval(timer); } timer = setInterval(function () { if (iTarget - oDiv.offsetLeft < speed && 700 - oDiv.offsetLeft >= 0) { oDiv.style.left = iTarget + 'px'; clearInterval(timer); } oDiv.style.left = oDiv.offsetLeft + speed + 'px'; }, 30); } oBtn.onclick = startMove; }
这个会出现什么问题?在抵达目标点后,点击按钮,#red还会继续运动一下。
问题代码3:
window.onload = function () { var oDiv = document.getElementById('red'); var oBtn = document.getElementById('btn'); var timer = null; function startMove() { var speed =9; var iTarget = 700; if (timer) { clearInterval(timer); } timer = setInterval(function () { if (oDiv.offsetLeft >= iTarget) { clearInterval(timer); } else { oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } }, 30); } oBtn.onclick = startMove; }
这个会出现什么问题?#red运动终止点有可能超出目标值一点,没有准确停止在目标值点。