封装动画函数-匀速运动

    <button>点击动画开始</button>
    <div></div>

　　注意一定要给div加定位，不然就没法移动了

div {
            position: relative;
            top: 0;
            left: 0;
             100px;
            height: 100px;
            background-color: pink;
        }

　　给元素添加匀速运动的动画，并封装函数

function animate(obj, target) {
            // 需要先清除定时器，防止连续点击速度变快
            clearInterval(obj.timer)
            obj.timer = setInterval(function() {
                if (obj.offsetLeft >= target) {
                    // 当到达目标距离时，就要清除定时器
                    clearInterval(obj.timer)
                } else {
                    // 注意需要添加else语句，直接写会导致点击时即使到达目标位置还会动
                    obj.style.left = obj.offsetLeft + 1 + 'px';
                }
            }, 30)
        }
        var div = document.querySelector('div');
        var btn = document.querySelector('button')
            // 给btn添加事件,注意function(){},再花括号里面添加调函数,而不是直接写函数
        btn.addEventListener('click', function() {
            animate(div, 500)
        })