JS運動框架的封裝過程(一)

給大家出一道題，從起點A走到目的地B，一共用了1000毫秒，每一次是30毫秒，請問你在這裡面得到了哪些信息？

  信息有哪些呢？

   第一個，總時長是:1000毫秒

   第二個，多久時間走一次？30毫秒

   第三個，走的總次數:1000/30

   第四個，距離:B-A

   第五個，步長：距離/總次數

運動框架的實現思路：就是在一定的時間段裡面改變left、top、width、height，到達目的地之後停止。

可以先思考一下，在頁面里如何讓div動起來？

     思考如下：1、設置div的時候為絕對定位，因為只有絕對定位之後，left、top等值才會在頁面上顯示出來。否則在頁面上看不見div。

                   2、可以給div設置點擊事件，在函數裡面定義總的步數count，總距離dis，速度step=dis/count,還需要設置一個當前的步數，給它進行初始化n=0

                   3、然後使用計時器setInterval（），獲取到div當前的距離，讓他div動起來。

具體代碼如下：               

<script type="text/javascript">

         window.onload = function(){
                 var oDiv = document.getElementById('div1');
                         oDiv.onclick = function(){
                                  var count = parseInt(1000/30);//走的總步數
                                  var dis = 500-0;//距離
                                  var step = dis/count;//
                                  var n = 0；//當前的步數

                                  timer = setInterval(function(){
                                       n++;
                                    oDiv.style.left = n*step + 'px';
                                  },30)
            }
}
</script>

其實讓div動起來很簡單，就這麼幾行代碼div就會動起來了。

但是呢div他不會停下來，一直在運動，那是因為沒有給它設置運動終止條件。在上面代碼中我們已經設置了當前的步數，也設置了總步數，那麼噹噹前步數和總步數一致的時候，然後清除計時器，那麼div是不是就可以停止了呢？

當步數達到500的時候，div就會停到500那塊。

改善後的代碼如下:

 window.onload = function(){

        var oDiv = document.getElementById('div1');
        var timer;
         oDiv.onclick = function(){
             var count = parseInt(1000/30);//走的總步數
             var dis = 500-0;//距離
             var step = dis/count;//速度
             var n = 0;//當前的步數
             timer = setInterval(function(){
                   n++;
                   oDiv.style.left = n*step +'px';

           //判斷條件，當前步數和總步數一致的時候，那麼div就可以停止了                if(n == count){
                   clearInterval(timer)
                 };
        },30)
     }
}
</script>

我們可以用函數把運動的過程給封裝起來

<script type="text/javascript">
       window.onload = function(){
             var oDiv = document.getElementById('div1');
             var timer;

           obj是獲取的對象，name是div的Left、Top、Width、Height值，target是最終的目的地，dur是總時長
            function move(obj,name,target,dur){
                   var count = parseInt(dur/30);
                   var start = obj.offsetLeft;//把div剛開始在頁面上的位置存在變數中
                   var dis = target - start;//dis為距離
                   var step = dis/count;
                   var n = 0;
                   timer = setInterval(function(){
                          n++;
                          obj.style[name] = start+ n*step +'px';

                          //判斷條件，當前步數和總步數一致的時候，那麼div就可以停止了
                          if(n == count){
                              clearInterval(timer)
                     }
            },30)
        }
          oDiv.onclick = function(){
                 move(oDiv,'top',100,1000)
         }
 }
</script>

精彩內容待續...