js 数字递增特效 仿支付宝我的财富 HTML5

2017-05-04 20:38

上周五应着公司临时需求,一天的时间解决掉官网(ps:比较简单哈哈),需求里面有一个特效就是数字递增到指定的数值,其实JS写也不复杂的,但是我发现一个js小插件,这个插件轻巧简单,用起来也非常简单实用。在这里分享给小盆友们吧,喜欢的直接拿走。

ion

上面就是这个插件的效果,我们来看一下怎么使用的吧

第一: HTML部分这里简单列举一个

 <div class="counter col_fourth">
     <h2 class="timer count-title" id="count-number" data-to="300" data-speed="1500"></h2>
     <p class="count-text ">小月博客</p>
 </div>

 

上面我们来了解两个关键的东西:

  • data-to   这个属性控制你最终要递增的数值是多少
  • data-speed    这个看英文的意思就很清楚了就是表示数据递增的速度了
  • ps: 这里的class和id  根据大家各自的修改去调整就好了,

    第二:JS部分也是插件的核心代码

    $.fn.countTo = function(a) {
         a = a || {};
         return $(this).each(function() {
             var c = $.extend({},
             $.fn.countTo.defaults, {
                 from: $(this).data("from"),
                 to: $(this).data("to"),
                 speed: $(this).data("speed"),
                 refreshInterval: $(this).data("refresh-interval"),
                 decimals: $(this).data("decimals")
             }, a);
         var h = Math.ceil(c.speed / c.refreshInterval),
         i = (c.to - c.from) / h;
         var j = this,
         f = $(this),
         e = 0,
         g = c.from,
         d = f.data("countTo") || {};
         f.data("countTo", d);
         if (d.interval) {
             clearInterval(d.interval)
         }
         d.interval = setInterval(k, c.refreshInterval);
         b(g);
         function k() {
             g += i;
             e++;
             b(g);
             if (typeof(c.onUpdate) == "function") {
                 c.onUpdate.call(j, g)
             }
             if (e >= h) {
                 f.removeData("countTo");
                 clearInterval(d.interval);
                 g = c.to;
                 if (typeof(c.onComplete) == "function") {
                     c.onComplete.call(j, g)
                 }
             }
         }
         function b(m) {
             var l = c.formatter.call(j, m, c);
             f.html(l)
         }
     })
    };
    $.fn.countTo.defaults = {
         from: 0,
         to: 0,
         speed: 1000,
         refreshInterval: 100,
         decimals: 0,
         formatter: formatter,
         onUpdate: null,
         onComplete: null
    };
    function formatter(b, a) {
         return b.toFixed(2)
    }
    $("#count-number").data("countToOptions", {
         formatter: function(b, a) {
             return b.toFixed(2).replace(/\B(?=(?:\d{3})+(?!\d))/g, ",")
         }
    });
    $(".timer").each(count);
    function count(a) {
         var b = $(this);
         a = $.extend({},
         a || {},
         b.data("countToOptions") || {});
         b.countTo(a)
    };

     

    以上就是代码的全部了,css部分就不在这里显示了,demo下载的小伙伴在下面点击下载吧!

    其实这个插件可扩展性很大的,至于小伙伴喜欢什么样子的显示自己动手改造吧!

     

    demo下载请点击