這篇文章主要介紹js如何實現(xiàn)數(shù)字遞增特效，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司專業(yè)IDC數(shù)據(jù)服務器托管提供商，專業(yè)提供成都服務器托管，服務器租用，成都天府聯(lián)通服務器托管，成都天府聯(lián)通服務器托管，成都多線服務器托管等服務器托管服務。

示例如下：

上面就是這個插件的效果，我們來看一下怎么使用的吧

第一： HTML部分這里簡單列舉一個

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

上面我們來了解兩個關鍵的東西：

• data-to  這個屬性控制你最終要遞增的數(shù)值是多少

• data-speed    這個看英文的意思就很清楚了就是表示數(shù)據(jù)遞增的速度了

ps： 這里的class和id  根據(jù)大家各自的修改去調(diào)整就好了，

第二：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)
};

以上是“js如何實現(xiàn)數(shù)字遞增特效”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標題：js如何實現(xiàn)數(shù)字遞增特效
標題URL：http://chinadenli.net/article12/gsjggc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供自適應網(wǎng)站、用戶體驗、網(wǎng)站內(nèi)鏈、響應式網(wǎng)站、關鍵詞優(yōu)化、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)