js 数字递增递减_JavaScript如何实现数字递增特效

本篇教程介绍了JavaScript如何实现数字递增特效，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。

<

第一： HTML部分这里简单列举一个

小月博客

上面我们来了解两个关键的东西：

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)

};

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端JavaScript频道！