数字递增，顾名思义就是数字不断增加，数字递增的效果就是要一定时间内，让数字有一个增加的特效，一般用于强调某个内容。

用 jquery 也很好处理，大概就是下面这些。

  • data-to 属性代表最后想要递增到的数值
  • data-speed 代表数值想要递增的过程时间

class="num-ber" 和 id="count-number" 按照这个填入。

<p>
  <span class="num-ber" id="count-number" data-to="40" data-speed="1000"></span>+
</p>

引入 jquery 之后再添加下面的 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(0)
}
$("#count-number").data("countToOptions", {
  formatter: function (b, a) {
    return b.toFixed(0).replace(/\B(?=(?:\d{3})+(?!\d))/g, ",")
  }
});
$(".num-ber").each(count);

function count(a) {
  var b = $(this);
  a = $.extend({},
    a || {},
    b.data("countToOptions") || {});
  b.countTo(a)
};