countUp.js实现数字滚动效果
作者：清欢时间：2026-10-23 12:06:37浏览：155
本文介绍如何使用轻量级JavaScript库countUp.js实现数字滚动加载效果。通过npm安装并引入模块，利用CountUp构造函数指定目标元素、起止数值及持续时间等参数，可快速创建平滑的数字动画。文章提供了详细的参数说明、方法调用及Vue环境下的完整代码示例，帮助开发者轻松集成动态数据展示功能。
countUp.js数字滚动效果实现指南
本文分享countUp.js实现数字滚动效果的具体代码，供读者参考。
1. 概述
1.1 说明
功能概述与库介绍
在项目开发中，常需动态展示数据加载状态，例如将数值从0滚动至10000，耗时5秒。借助countup.js可便捷实现此类功能。
1.2 countup.js
countup.js是一个无依赖、轻量级的JavaScript类库，旨在快速创建动画，以更具吸引力的方式展示数字或数据。详细信息可查阅countup.js官方文档。
安装与基础用法
1.3 countup.js使用
通过执行npm install countup命令安装依赖包。
在页面代码中使用import CountUp from "countup"语句引入模块。
实例化对象时使用new CountUp(target, startVal, endVal, decimals, duration, options)构造函数。
参数与方法详解
参数说明如下：
- target：目标元素的ID，必填项。
- startVal：起始数值，必填项。
- endVal：结束数值，必填项。
- decimals：小数位数，默认为0，可选。
- duration：动画持续时间，单位为秒，默认为2，可选。
- options：配置对象，可选。
useEasing：布尔值，是否启用缓动动画，默认为true（启用），设为false则匀速播放。
useGrouping：布尔值，是否对数字进行分组显示，如将12345格式化为12,345，默认为true。
separator：字符串，分组时使用的分隔符，默认为逗号。
decimal：字符串，小数点符号，默认为点号。
prefix：字符串，数字前缀，如将12345显示为￥12345。
suffix：字符串，数字后缀，如将12345显示为12345$或12345元。
方法说明：
提供pauseResume方法用于暂停或恢复动画，reset方法用于重置动画，update(newVal)方法用于更新数值。
代码示例与集成
2. 代码
2.1 源代码
var CountUp = function(target, startVal, endVal, decimals, duration, options) {
var self = this;
self.version = function() {
return "1.9.2"
};
self.options = {
useEasing: true,
useGrouping: true,
separator: ",",
decimal: ".",
easingFn: easeOutExpo,
formattingFn: formatNumber,
prefix: "",
suffix: "",
numerals: []
};
if (options && typeof options === "object") {
for (var key in self.options) {
if (options.hasOwnProperty(key) && options[key] !== null) {
self.options[key] = options[key]
}
}
}
if (self.options.separator === "") {
self.options.useGrouping = false
} else {
self.options.separator = "" + self.options.separator
}
var lastTime = 0;
var vendors = ["webkit", "moz", "ms", "o"];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"];
window.cancelAnimationFrame = window[vendors[x] + "CancelAnimationFrame"] || window[vendors[x] + "CancelRequestAnimationFrame"]
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall)
},
timeToCall);
lastTime = currTime + timeToCall;
return id
}
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id)
}
}
function formatNumber(num) {
num = num.toFixed(self.decimals);
num += "";
var x, x1, x2, x3, i, l;
x = num.split(".");
x1 = x[0];
x2 = x.length > 1 ? self.options.decimal + x[1] : "";
if (self.options.useGrouping) {
x3 = "";
for (i = 0, l = x1.length; i < l; ++i) {
if (i !== 0 && ((i % 3) === 0)) {
x3 = self.options.separator + x3
}
x3 = x1[l - i - 1] + x3
}
x1 = x3
}
if (self.options.numerals.length) {
x1 = x1.replace(/[0-9]/g,
function(w) {
return self.options.numerals[ + w]
});
x2 = x2.replace(/[0-9]/g,
function(w) {
return self.options.numerals[ + w]
})
}
return self.options.prefix + x1 + x2 + self.options.suffix
}
function easeOutExpo(t, b, c, d) {
return c * ( - Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b
}
function ensureNumber(n) {
return (typeof n === "number" && !isNaN(n))
}
self.initialize = function() {
if (self.initialized) {
return true
}
self.error = "";
self.d = (typeof target === "string") ? document.getElementById(target) : target;
if (!self.d) {
self.error = "[CountUp] target is null or undefined";
return false
}
self.startVal = Number(startVal);
self.endVal = Number(endVal);
if (ensureNumber(self.startVal) && ensureNumber(self.endVal)) {
self.decimals = Math.max(0, decimals || 0);
self.dec = Math.pow(10, self.decimals);
self.duration = Number(duration) * 1000 || 2000;
self.countDown = (self.startVal > self.endVal);
self.frameVal = self.startVal;
self.initialized = true;
return true
} else {
self.error = "[CountUp] startVal (" + startVal + ") or endVal (" + endVal + ") is not a number";
return false
}
};
self.printValue = function(value) {
var result = self.options.formattingFn(value);
if (self.d.tagName === "INPUT") {
this.d.value = result
} else {
if (self.d.tagName === "text" || self.d.tagName === "tspan") {
this.d.textContent = result
} else {
this.d.innerHTML = result
}
}
};
self.count = function(timestamp) {
if (!self.startTime) {
self.startTime = timestamp
}
self.timestamp = timestamp;
var progress = timestamp - self.startTime;
self.remaining = self.duration - progress;
if (self.options.useEasing) {
if (self.countDown) {
self.frameVal = self.startVal - self.options.easingFn(progress, 0, self.startVal - self.endVal, self.duration)
} else {
self.frameVal = self.options.easingFn(progress, self.startVal, self.endVal - self.startVal, self.duration)
}
} else {
if (self.countDown) {
self.frameVal = self.startVal - ((self.startVal - self.endVal) * (progress / self.duration))
} else {
self.frameVal = self.startVal + (self.endVal - self.startVal) * (progress / self.duration)
}
}
if (self.countDown) {
self.frameVal = (self.frameVal < self.endVal) ? self.endVal: self.frameVal
} else {
self.frameVal = (self.frameVal > self.endVal) ? self.endVal: self.frameVal
}
self.frameVal = Math.round(self.frameVal * self.dec) / self.dec;
self.printValue(self.frameVal);
if (progress < self.duration) {
self.rAF = requestAnimationFrame(self.count)
} else {
if (self.callback) {
self.callback()
}
}
};
self.start = function(callback) {
if (!self.initialize()) {
return
}
self.callback = callback;
self.rAF = requestAnimationFrame(self.count)
};
self.pauseResume = function() {
if (!self.paused) {
self.paused = true;
cancelAnimationFrame(self.rAF)
} else {
self.paused = false;
delete self.startTime;
self.duration = self.remaining;
self.startVal = self.frameVal;
requestAnimationFrame(self.count)
}
};
self.reset = function() {
self.paused = false;
delete self.startTime;
self.initialized = false;
if (self.initialize()) {
cancelAnimationFrame(self.rAF);
self.printValue(self.startVal)
}
};
self.update = function(newEndVal) {
if (!self.initialize()) {
return
}
newEndVal = Number(newEndVal);
if (!ensureNumber(newEndVal)) {
self.error = "[CountUp] update() - new endVal is not a number: " + newEndVal;
return
}
self.error = "";
if (newEndVal === self.frameVal) {
return
}
cancelAnimationFrame(self.rAF);
self.paused = false;
delete self.startTime;
self.startVal = self.frameVal;
self.endVal = newEndVal;
self.countDown = (self.startVal > self.endVal);
self.rAF = requestAnimationFrame(self.count)
};
if (self.initialize()) {
self.printValue(self.startVal)
}
};2.1 代码示例
<!-- 数字滚动 -->
<template>
<div id="numScroll" style="width: 200px;height: 200px;font-size: 30px;font-weight: bold;"></div>
</template>
<script>
import CountUp from "countup"
export default {
name: "numberScroll.vue",
mounted() {
this.numberScroll()
},
methods: {
numberScroll() {
let count = new CountUp("numScroll", 0, 56565, 0, 5, {duration: 5, useEasing: false})
if (!count.error) {
count.start()
} else {
console.log(count.error)
}
}
}
}
</script>以上为本文全部内容，希望对学习有所帮助，欢迎支持本站。
作者最新文章
JS转整数出现NaN怎么办？常见异常处理方案
2026-11-05 16:27:31
推荐几款免安装的在线JS压缩工具
2026-11-05 14:54:53
JS怎么使用JSON.stringify实现JSON格式化与缩进
2026-11-04 10:47:30
CodePen、JSFiddle 与 StackBlitz：主流 JS 在线编辑器对比
2026-11-03 21:07:49
JS字符串转数字后怎么正确判断是否为有效数值
2026-11-03 20:04:15