首页 > 代码库 > 匀速运动之停止条件

匀速运动之停止条件

***************************匀速运动 1****************************************

<!DOCTYPE html>

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{margin:0;padding:0;}
        div{width:100px;height:100px;background:red;position: absolute;left:0;}
        span{width:0;height:600px;position:fixed;left:600px;top:0;border-left:1px solid red;}
    </style>
</head>
<body>
<div></div>
<span></span>
</body>
</html>
<script type="text/javascript">
    var oDiv=document.getElementsByTagName("div")[0];
    domove(oDiv,600);
    var timer;
    var Speed;
    function domove(obj,target)
    {
        Speed=10;


        obj.onclick=function(){
            timer=setInterval(function(){
                obj.style.left=obj.offsetLeft+Speed+"px";
               if(obj.offsetLeft==target){clearInterval(timer);}
////再次点击的时候还是会继续运动的,这里的==是有问题的
            },30)
        }
    }

</script>


***************************匀速运动 2****************************************

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{margin:0;padding:0;}
        div{width:100px;height:100px;background:red;position: absolute;left:0;}
        span{width:0;height:600px;position:fixed;left:600px;top:0;border-left:1px solid red;}
    </style>
</head>
<body>
<input type="button" value=http://www.mamicode.com/"buttons" onclick="startMove()"/>
<div></div>
<span></span>
</body>
</html>
<script type="text/javascript">
    var timer=null; //定时器需放在函数外面,避免每次调用都开启一个
    function startMove()
    {
    var oDiv=document.getElementsByTagName("div")[0];
    clearInterval(timer);//移出所有的定时器,解决了每次点击都开启一个定时器的问题
         timer=setInterval(function(){
             var Speed=10;
               if(oDiv.offsetLeft>=600){clearInterval(timer);} //已经到达,匀速运动if里面的条件必须为>=
                else{oDiv.style.left=oDiv.offsetLeft+Speed+"px";}//未到达
            },30)


    }
</script>



***************************匀速运动 3****************************************

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{margin:0;padding:0;}
        div{width:100px;height:100px;background:red;position: absolute;left:0;}
        span{width:0;height:600px;position:fixed;left:600px;top:0;border-left:1px solid red;}
    </style>
</head>
<body>
<input type="button" value=http://www.mamicode.com/"buttons" onclick="startMove(600)"/>
<div></div>
<span></span>
</body>
</html>
<script type="text/javascript">
    var timer=null; //定时器需放在函数外面,避免每次调用都开启一个
    function startMove(itarget)
    {
        var oDiv=document.getElementsByTagName("div")[0];
        clearInterval(timer);//移出所有的定时器,解决了每次点击都开启一个定时器的问题
         timer=setInterval(function(){
             var Speed=10;
               if((itarget-oDiv.offsetLeft)<Speed)//如果不足够再次运行一次定时器的距离的时候 就停止,当然>=也是一个停止条件,常见的有两种停止条件
               {
                   oDiv.offsetLeft=itarget;
                   clearInterval(timer);
               }
                else{oDiv.style.left=oDiv.offsetLeft+Speed+"px";}//未到达
            },30)


    }
</script>

匀速运动之停止条件