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>

精彩内容待续...

上一篇:Java基础(二)


下一篇:servlet(一)