デジタル インクリメント特殊効果のサンプル コードの js 実装

この記事では主に、非常に優れた参考値を持つ Alipay My Wealth のデジタル インクリメント特殊効果の JS 実装を紹介します。編集者と一緒に見てみましょう

先週の金曜日、会社の一時的なニーズに応えて、公式ウェブサイトを1日で完成させました（追伸：比較的簡単です笑）需要が増加するという特別な効果があります。実際には、これは JS で書かれています。複雑ではありませんが、このプラグインは軽くてシンプルで、非常にシンプルで実用的です。ここで小さなお友達と共有して、気に入ったら受け取ってください。

上記はこのプラグインの効果です。使い方を見てみましょう

最初に、HTML 部分の簡単なリストを次に示します

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

上記の 2 つの重要なことを理解しましょう:

• data-to この 属性 は、増分する最終値を制御します

• data-speed 英語でのこれの意味は非常に明確で、データの速度を意味しますインクリメント

ps: ここの class と ID は、各自の変更に従って調整できます。

2 番目: 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部分はここにありません デモをダウンロードしたい場合は、以下をクリックしてダウンロードしてください。

実際、このプラグインは非常に拡張性が高く、好みの表示に変更することができます。

以上がデジタル インクリメント特殊効果のサンプル コードの js 実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。