一、需求

最新需要给一个页面的很多数字做滚动。

主要的需求除了数字滚动外,还需要一个回调,需要滚动结束之后触发某些方法。

除此之外,某些时候 需要使用 html 中的 attr 来获取需要的参数。

秉着不抽出来不舒服斯基的思想,就搞了一个简单的插件,专门用来跑数字滚动。

二、实现

这个插件并不全部是我自己写的,但是我不知道原作者是谁,这是之前我在网上又看到并且保存在我电脑中的一个插件,吗,貌似时间还比较久。

所以首先声明:

如果原作者看到了这个插件,并且是自己所做,请联系我,我将注明原作者名称

原来的插件存在的问题:

  1. 只能显示整数,对于小数无法显示
  2. 无法触发回调函数
  3. 只能通过 jquery 插件调用的时候传递参数

修改之后:

  1. 对于小数的显示,使用偷鸡的方式: 在跑数字的时候,跑整数,跑完之后,总是会执行一步操作,就是将数字再做一次 text() 赋值,此时无论跑的是什么,最终的结果一定是想要的结果
  2. 对于 回调函数 ,增加了一个 callback 参数,用来执行回调。
  3. 增加了一个 attr 配置参数,如果为 true,则会默认的从 html 的 attr 中获取 numberspeed 两个值,从而就不需要在 js 中配置相关的参数,更加的方便。

三、核心代码:

var timer = setInterval(function () {
    if (step <= baseNum && speed != 0) {
        domObj.text(sum = speed * step);
        step++;
    } else if (sum < number) {
        domObj.text(++sum);
    } else {
        clearInterval(timer);
        // 最终的结果确保小数的情况
        domObj.text(options.number);
        // 执行一次 callback
        options.callback();
    }
}, int_speed);    

其中第一个 if 判断如果 speed(滚动速度)不为 0 ,并且 step 是小于 100 (baseNum=100),则通过 step * speed 的方式增加数字(对于大数,会根据 speed 去增加,速度掌握在配置手里)

第二个 if ,当 step 已经超过了 baseNum 说明无法再通过 乘法 来进行数字更新(会超出),则通过 sum ++ 的方式更新数字,此时就是每次 +1 的更新。

最终三部操作,一个是清除时间选择器,一个是最终确保显示结果,一个是执行回调。

四、在线演示:

地址:

Github 代码:

Gitosc 代码:

2.jpg