jqを使用して数字の増加効果を作成する

数字の増加とは、その名の通り、数字が絶えず増加することを指します。数字の増加効果は、特定の時間内に数字が増加する特効を持たせることを目的としており、一般的には特定の内容を強調するために使用されます。

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)
};