运动基础

css

    #div1{
        width: 200px;height: 200px;background: #333333;border-radius: 10px;
        position: absolute;
        /*position 随意给一个属性都行，但是不给position不能运动*/
        left: 0px;
    }
    /*#btn{position: fixed;}*/

body

  <button id="btn">动</button>
 <div id="div1"></div>

javascript

let Div1 = document.querySelector("#div1");
let Btn = document.querySelector("#btn");
let time = null; //配合第一处clearInterval(time);使用，防止点击button次数越多，div运动次数变的越快（多次执行点击事件）
Btn.onclick = () => {
    // setInterval(() => {Div1.style.left = Div1.offsetLeft+10+'px';},30);//一直走不停
    clearInterval(time);
    time = setInterval(() => {

        if (Div1.offsetLeft >= 300) {
            clearInterval(time)
        }
        else {
            Div1.style.left = Div1.offsetLeft+10+'px';
        }

        },30);
};

image.png