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动起来。

具体代码如下：               

其实让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)
     }
}

我们可以用函数把运动的过程给封装起来

精彩内容待续...

Atas ialah kandungan terperinci JS运动框架的封装过程(实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!