javascript中的匀速运动（两种方式）

javascript中的匀速运动

不要小看这个东西呀，机关重重呀

 html:

<input type="button"  value="start" onclick="show()"/>
 <div id="move">
 </div>

css:

 #move{
     height:100px;
     width:100px;
     background:green;
     position:absolute;
     top:100px;
     left:0px;
 }

js实现第一步：动起来

 function show(){
     //首先我们要让物体起来
     var obj=document.getElementById("move");
     var zhen=8; 
     //定时器
     setInterval(function(){
         obj.style.left=obj.offsetLeft+zhen+"px";
     },20)
     
 }

动起来了，单你不可能让它一直动撒！设定一个终点！假设是300px

  var Timer=null;
  function show(){
     //首先我们要让物体起来
     var obj=document.getElementById("move");
     var zhen=8; 
     //定时器
     Timer=setInterval(function(){
         if(obj.offsetLeft==300){  //注意这里，机关重重呀
             clearInterval(Timer) 
         }
         obj.style.left=obj.offsetLeft+zhen+"px";
     },20)
     
 }

尼玛，运行一看，居然没停下来，我操，我们来分析机关！

那这么办呢？--终止的条件！

尝试方法一 

当它们之间的距离相差一个帧的时候，我们就停止下来，最后让它强制对其滴呀

 if(Math.abs((obj.offsetLeft-iTarget))<=Math.abs(speed)){
         clearInterval(rightTimer);
         obj.style.left=iTarget+'px';
}

尝试方法二

距离/zhen=0，也就是能够整除的时候，我们才能停在指定的地点滴呀!例如：

但是，到这一步，还没有完滴呀；当你多次点击按钮是，你会发现，物体运动的越来越快了呀！

那是因为，你每点击一次，那么就会多生成一个setInterval 对象滴呀!

解决方法就是在setInterval(function (){})前面加上clearInterval(Timer)

最终较为完整的代码如下：

  var Timer=null;
  function show(){
     var obj=document.getElementById("move");
     var zhen=10; 
      clearInterval(Timer) ;    
     Timer=setInterval(function(){
         if(obj.offsetLeft==300){ 
            clearInterval(Timer) ;         
         }else{
        obj.style.left=obj.offsetLeft+zhen+"px";
         }
     },20)
 }

看似简单，又不太简单的运动，有了这个基础之后，我们就可以做出其他的了！

再思考，如果我们要它反向运动呢？

    var speed=0;
    //目标来减去物体的位置是否大于零，然后判断速度的正负滴呀
    var isPlus=iTarget-obj.offsetLeft;
    if(isPlus<0){
        speed=-7;
    }else{
        speed=7;
    }

然后，我来给出完整的匀速运动的javascript代码滴呀

 //下面我来给出完整的代码区域
 //运动的几大要素;
 //物体自身的位置:obj.offsetLeft;
 //目标终点：    iTarget;
 //帧           speed;
 //Timer
 var Timer=null;
 function JavaScriptMove(iTarget,Id){
     var obj=document.getElementById(Id);
     var speed=6;
     if(obj.offsetLeft-iTarget>0){
         speed=-speed;
     }else{
        speed=speed; //....
     }
      //为了防止鼠标的多次点击滴呀
      clearInterval(Timer);
     //开始运动
     Timer=setInterval(function (){
         //物体停止的条件:他们之间的距离差值小于一个帧滴呀就停下来...然后
         if(Math.abs(obj.offsetLeft-iTarget)<=Math.abs(speed)){
            clearInterval(Timer);
            //强制移动到目标
            obj.style.left=iTarget+"px"; //这样就算是移动到了指定的地点滴呀
         }else{
             obj.style.left=obj.offsetLeft+speed+'px';
         }
     },30)
     
     
 }
 //最后还得尝试着，用面向对象的方式进行代码的改造滴滴
 //这个物体的简单运动滴呀

javascript 实现匀速匀速方式二：

for循环+闭包+setTimeout （不过，不推荐这种做法，不过可以加深对闭包的理解）

具体的原理你可以看另外一边我的文章

http://www.cnblogs.com/mc67/p/4801422.html 

感觉还多帅滴呀

两种方式来实现滴呀