JS实现数字递增特效:仿支付宝财富页面效果
作者:异步漫步时间:2026-10-22 03:50:02浏览:521
本文介绍一个轻量级的JavaScript插件,用于实现数字递增动画效果,类似支付宝财富页面的数字滚动展示。通过简单的HTML属性配置和JS调用,即可实现指定数值的平滑递增显示。
数字递增特效介绍
上周末响应公司临时需求,耗时一天完成官网开发(注:项目较简单)。需求包含一个数字递增至指定值的特效。虽然原生JS实现不难,但我发现了一款轻量级JS插件,其使用简便且实用。在此分享给读者,欢迎直接使用。

上述即为该插件的运行效果,接下来介绍具体使用方法。
HTML配置方法
第一步: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 属性表示数字递增的速度,从英文含义即可理解。
注:class和id需根据实际开发需求自行调整。
JS核心代码实现
第二步: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。
本文内容至此结束,希望对大家的学习或工作有所帮助,感谢支持本站!
作者最新文章
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法:concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19
