使用 JavaScript 实现从 0 到 3000 动态显示数字从小变大效果的方法
----使用 JavaScript 实现从 0 到 3000 动态显示数字从小变大效果的方法
---方法一（这个很好用）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p id="numberDisplay">0</p>
<script>
//动态数字效果 - 参数 elDom 元素class '.count_1' 或 id '#count_1',start 开始数字，end结束数字，duration 持续时间
window.setNum = function (elDom, start, end, duration) {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
document.querySelector(elDom).innerHTML = Math.floor(progress * (end - start) + start);
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
//调用
setNum('#numberDisplay', 0, 12000), 3000);
</script>
</body>
</html>---方法二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p id="numberDisplay">0</p>
<script>
window.setNum = function (targetNumber=10,domId) {
/*参数说明：targetNumber 终止数字，帮元素ID*/
let number = 0;
const interval = setInterval(() => {
if (number < targetNumber) {
number++;
document.getElementById(domId).textContent = number;
} else {
clearInterval(interval);
}
}, 0.000000000001); // 每 10 毫秒增加一次数字，可以根据需求调整这个时间间隔
}
setNum(3000,'numberDisplay');
</script>
</body>
</html>