JavaSprict基础-匀速动画抽取

HTML部分：

<button id="btn">移动</button>
<button id="btn1">往左</button>
<div id="box" class="box"></div>

CSS部分：

 *{
            margin: 0;
            padding: 0;
            border:none;
        }
        div{
            width: 100px;
            height: 100px;
            border:1px solid #ccc;
            background: red;
            position: absolute;
        }

JS部分：

window.onload = function(){
1.获取标签
        var btn = document.getElementById('btn');
        var btn1 = document.getElementById('btn1');
        var box = document.getElementById('box');
2.点击按钮实现动画
        btn.onclick = function(){
           constant(box,800,4);
        };
        btn1.onclick = function(){
           constant(box,0,4);
        }
0.封装函数用来表示匀速动画
（obj:表示进行动画的标签）
（target:表示目标值）
（speed：表示速度）
        function constant(obj,target,speed){
清空定时器
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
根据方向来确定速度正负值
               var mySpeed = target > obj.offsetLeft?speed:-speed;
             obj.style.left = obj.offsetLeft + mySpeed +'px';
                if(Math.abs(target - obj.offsetLeft) < Math.abs( mySpeed))
                {
                    clearInterval(obj.timer);
                    obj.style.left = target +'px';
                }
            },20)
        }
    }