js 數字遞增特效 仿支付寶個人財富 HTML5

上週五應着公司臨時需求，一天的時間解決掉官網（ps：比較簡單哈哈），需求裏面有一個特效就是數字遞增到指定的數值，其實JS寫也不復雜的，可是我發現一個js小插件，這個插件輕巧簡單，用起來也很是簡單實用。在這裏分享給小盆友們吧，喜歡的直接拿走。

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

第一： 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下載請點擊