新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
js如何實現(xiàn)數(shù)字遞增特效
這篇文章主要介紹js如何實現(xiàn)數(shù)字遞增特效,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
成都創(chuàng)新互聯(lián)公司專業(yè)IDC數(shù)據(jù)服務(wù)器托管提供商,專業(yè)提供成都服務(wù)器托管,服務(wù)器租用,成都天府聯(lián)通服務(wù)器托管,成都天府聯(lián)通服務(wù)器托管,成都多線服務(wù)器托管等服務(wù)器托管服務(wù)。
示例如下:
上面就是這個插件的效果,我們來看一下怎么使用的吧
第一: HTML部分這里簡單列舉一個
小月博客
上面我們來了解兩個關(guān)鍵的東西:
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)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站名稱:js如何實現(xiàn)數(shù)字遞增特效
地址分享:http://ef60e0e.cn/article/gsjggc.html