数字递增,顾名思义就是数字不断增加,数字递增的效果就是要一定时间内,让数字有一个增加的特效,一般用于强调某个内容。
用 jquery 也很好处理,大概就是下面这些。
data-to
属性代表最后想要递增到的数值data-speed
代表数值想要递增的过程时间
class="num-ber"
和 id="count-number"
按照这个填入。
<p>
<span class="num-ber" id="count-number" data-to="40" data-speed="1000"></span>+
</p>
引入 jquery 之后再添加下面的 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(0)
}
$("#count-number").data("countToOptions", {
formatter: function (b, a) {
return b.toFixed(0).replace(/\B(?=(?:\d{3})+(?!\d))/g, ",")
}
});
$(".num-ber").each(count);
function count(a) {
var b = $(this);
a = $.extend({},
a || {},
b.data("countToOptions") || {});
b.countTo(a)
};