2016-05-30 定时器

<body>
<input id="btn" type="button" value="按钮">
<div id="div"></div>
<script>
    var btn= document.getElementById('btn');
    var odiv=document.getElementById("div");
    //var timer=null;
    odiv.timer=null;

    btn.onclick=function(){
        clearInterval(odiv.timer);//防止动画在执行过程中,人为的在不停的点击按钮,不断产生定时器
        odiv.timer=setInterval(function(){
            var speed =getStyle(odiv,'left',50);//odiv 往右移动50px
            if(speed>900){
                speed=900;
            }
            odiv.style.left=speed+'px';//每隔0.1s往右移动10px
            if(speed==900){//停止移动
                clearInterval(odiv.timer);
                alert(speed);
            }
        },200);
    }

    function getStyle(obj,attr,step){//为什么要parseInt(),因为obj.currentStyle[attr] 拿到的是30px -->30
        return parseInt(obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr])+step ;
    }

</script>
</body>

2.封装成函数

    <style>
        div{ 50px;height: 50px; background: red;border: 1px solid black; position: absolute; top: 50px; left: 30px}
    </style>
</head>
<body>
<input id="btn1" type="button" value="往前跑">
<input id="btn2" type="button" value="往后跑">
<div id="div"></div>
<script>
    var btn1= document.getElementById('btn1');
    var btn2= document.getElementById('btn2');
    var odiv=document.getElementById("div");
    odiv.timer=null;

    btn1.onclick=function(){
        doMove(odiv,20,800,50);//odiv往右每次移动20px 到800px位置停止,速度为50ms/次
    }

    btn2.onclick=function(){
        doMove(odiv,-20,10,50);
    }


    function doMove(obj,stepLength,target,animationVelocity){
        clearInterval(obj.timer);
        odiv.timer=setInterval(function(){
            var speed =getStyle(obj,'left')+stepLength;//步长
            if(speed>target && stepLength>0){//往右跑
                speed=target;
            }
            if(speed<target && stepLength<0){//往左跑
                speed=target;
            }
            obj.style.left=speed+'px';//每隔0.1s 移动stepLength px
            if(speed==target){//停止移动
                clearInterval(obj.timer);
            }
        },animationVelocity);
    }

    function getStyle(obj,attr){//为什么要parseInt(),因为obj.currentStyle[attr] 拿到的是30px -->30
        return parseInt(obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]) ;
    }

</script>
</body>
</html>

3.升级包装

<input id="btn1" type="button" value="往右跑">
<input id="btn2" type="button" value="往左跑">
<input id="btn3" type="button" value="往下跑">
<input id="btn4" type="button" value="往上跑">
<div id="div"></div>
<script>
    var btn1= document.getElementById('btn1');
    var btn2= document.getElementById('btn2');
    var btn3= document.getElementById('btn3');
    var btn4= document.getElementById('btn4');
    var odiv=document.getElementById("div");
    odiv.timer=null;

    btn1.onclick=function(){
        doMove(odiv,'left',20,800,50);//让 odiv 以20px/50ms 的速度 跑到距离left为800px的位置停下来
    }

    btn2.onclick=function(){
        doMove(odiv,'left',20,10,50);
    }
    btn3.onclick=function(){
        doMove(odiv,'top',20,500,50);//让 odiv 以20px/50ms 的速度 跑到距离top顶部为500px的位置停下来
    }
    btn4.onclick=function(){
        doMove(odiv,'top',20,50,50);
    }


    function doMove(obj,attr,stepLength,target,animationVelocity){
        stepLength=(getStyle(obj,attr)<target?stepLength:-stepLength);//如果obj所处的位置小于目标位置,则步长取正数,反之取负数
        clearInterval(obj.timer);
        odiv.timer=setInterval(function(){
            var speed =getStyle(obj,attr)+stepLength;//步长
            if(speed>target && stepLength>0 || speed<target && stepLength<0){
                speed=target;
            }
            obj.style[attr]=speed+'px';//每隔animationVelocity秒 移动stepLength px
            if(speed==target){//停止移动
                clearInterval(obj.timer);
            }
        },animationVelocity);
    }

    function getStyle(obj,attr){//为什么要parseInt(),因为obj.currentStyle[attr] 拿到的是30px -->30
        return parseInt(obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]) ;
    }

</script>