js如何实现数字递增特效

这篇文章主要介绍js如何实现数字递增特效，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

示例如下：

上面就是这个插件的效果，我们来看一下怎么使用的吧

第一： 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   这个属性控制你最终要递增的数值是多少

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

以上是“js如何实现数字递增特效”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！