封装运动一:div匀速运动到目标位置-CSDN博客

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            top: 100px;
        }
    </style>
</head>

<body>
    <button id="btn">匀速运动</button>
    <div id="box"></div>
    <script src="tool.js"></script>
    <script>
        /*匀速运动：
        思想：
        1、加计时器；
        2、改变left值(定位)；
        */
        var oBtn = ById('btn');
        var oBox = ById('box');
        var timer = null;
        oBtn.onclick = function () {
            clearInterval(timer);
            timer = setInterval(function () {
                oBox.style.left = oBox.offsetLeft + 2 + "px";
                //以上只能让div匀速运动下去，不能停止，若要让div在某一时段停止，则需给它设置一个目标值，
                //目标值即div相对于页面的距离
                if (oBox.offsetLeft == 400) {
                    clearInterval(timer);
                }
            }, 30)
        }
        /*简单的匀速运动就写完了，但是这个程序中还存在1个bug,当我们连续点击btn按钮时会发现，div移动的速度
        愈来愈快（原因：每点击一次计时器，就启动一次计时器，启动的计时器越多，div移动的越快）
        解决办法：程序每完成一次，便清除一次计时器
        */
    </script>
</body>

</html>