从零到一学JS:用JS写个动画

每日一kun：他们笑我长的丑，我笑他们讲的对。

用JS实现一个简单动画，为后面轮播图做准备

JS
var div = document.querySelector("div")
    var btn = document.querySelector("button")

    var packageTimer = function (obj, away) {
        clearInterval(obj.timer)
        obj.timer = setInterval(function () {
            if (obj.offsetLeft > away) {
                clearInterval(obj.timer)
            }
            obj.style.left = obj.offsetLeft + 5 + "px"

        }, 300)
    }


    btn.addEventListener("click", function () {
        packageTimer(div, 400)
    })
HTML
 <div></div>
    <button>点击就走</button>
CSS
    div {
        width: 200px;
        height: 200px;
        background-color: yellowgreen;
        left: 0;
        position: absolute;
        top: 100px;
    }

效果

Tips 第一个结束定时器不能删除，不然就会造成定时器一直执行，可以使用防抖和节流解决，不过直接在封装函数的入口每次执行前直接结束掉上一个定时器更简单，因为距离是固定的。