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)
     
 }

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

那这么办呢？

尝试方法一

 

尝试方法二

 

最好：

距离/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)
 }

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

javascript 实现匀速匀速方式二：

for循环+闭包+setTimeout

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

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

感觉还多帅滴呀

两种方式来实现滴呀