JavaScript - 移动元素
点击按钮使元素向右移动300像素 - 预览
HTML
<button id="btn" onclick="startMove()">向右移动至300像素</button>
<div id="box"></div>
JS
function startMove() {
let oBtn = document.getElementById('btn');
let oDiv = document.getElementById('box');
let timer = null;
let speed = 10;
// 每次点击前先关闭一次定时器 , 确保定时器无法被同时打开多次
clearInterval(timer);
timer = setInterval(function () {
// 如果元素到达距离300 , 则停止移动
if (oDiv.offsetLeft >= 300) {
clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
}, 30)
}