JavaScript练习 - 移动元素

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)
}