定时器的运用

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #box {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            position: absolute;
            left: 0;
        }
        
        #box1 {
            height: 800px;
            border: 1px solid;
            position: absolute;
            left: 900px;
            top: 0;
        }
        
        #box2 {
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            left: 0;
            top: 200px;
        }
    </style>

 <button id="btn1">点击按钮div向右移动</button>
    <button id="btn2">点击按钮div向左移动</button>
    <button id="btn3">点击按钮div向右移动</button>
    <button id="btn4">测试按钮</button>
    <br/>
    <div id="box"></div>
    <div id="box1"></div>
    <div id="box2"></div>

<script>
    var btn1 = document.getElementById("btn1");
    var box = document.getElementById("box");
    var btn2 = document.getElementById("btn2");
    //变量一个定时器
    // var time;
    //点击按钮后，使box向右移动(left值增大)
    btn1.onclick = function() {
        move(box, "left", 900, 10);
    };
    //点击按钮后，使box向左移动(left值减小)
    btn2.onclick = function() {
        move(box, "left", 0, 10);
    };
    var box2 = document.getElementById("box2");
    var btn3 = document.getElementById("btn3");
    //点击按钮后，使box向右移动(left值增大)
    btn3.onclick = function() {
        move(box2, "left", 900, 20);
    };
    var btn4 = document.getElementById("btn4");
    btn4.onclick = function() {
        move(box2, "width", 900, 20, function() {
            move(box2, "height", 300, 10);
        });
    };
    /*
    参数：
        obj：要执行动画的对象
        attr：要执行动画的样式，left,top,height
        target：执行动画的目标值
        speed：移动的速度(正数向右移动，负数向左移动)
        callback：回调函数，这个函数将会在动画执行完毕以后执行
    */
    function move(obj, attr, target, speed, callback) {
        //关闭上一个定时器
        clearInterval(obj.time);
        //获取当前div的位置
        var current = parseInt(getStyle(obj, attr));
        // 判断当前速度的正负
        if (current > target) {
            speed = -speed;
        }
        obj.time = setInterval(function() {
            //获取box原来的left的值
            var oldValue = parseInt(getStyle(obj, attr));
            //在旧值的基础上增加
            var newValue = oldValue + speed;
            // 判断newValue的值
            if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
                newValue = speed;
            }
            // 将新值设置给box
            obj.style[attr] = newValue + "px";
            if (newValue == target) {
                clearInterval(obj.time);
                callback && callback();
            }
        }, 30)
    };

    function getStyle(obj, name) {
        if (window.getComputedStyle) {
            return getComputedStyle(obj, null)[name];
        } else {
            return obj.currentStyle[name];
        }
    }
</script>