JavaScript 实现数字计数器的动画效果

写JavaScript 实现数字递增的效果

在HTML页面实现数字计数器的动画效果，类似于页面上的计数器功能，可以控制递增速度和效果的流畅度。主要是显示数字时流畅度更好，页面没那么僵硬

1、第一种

设置每次增加的数量，我这里演示的是123，就是每一毫秒显示123，下面演示的是从0到15210的显示，这里提示一下，数字越大显示的时间越长。

function incrementCounter(counterId, targetNumber, stepDuration = 10) {// 初始化当前数字为0let currentNumber = 0;// 每次递增的数量const incrementAmount = 123;// 设置一个定时器，每隔 stepDuration 毫秒执行一次const intervalId = setInterval(() => {// 每次增加 incrementAmountcurrentNumber += incrementAmount;// 如果当前数字超过或等于目标数字，就设为目标数字，并清除定时器if (currentNumber >= targetNumber) {currentNumber = targetNumber;clearInterval(intervalId);  // 清除定时器，停止递增}// 将当前数字显示在页面中对应的元素中document.getElementById(counterId).textContent = Math.floor(currentNumber);}, stepDuration);  // 每隔 stepDuration 毫秒执行一次递增}// 调用 incrementCounter 函数，传入要操作的计数器元素的 ID 和目标数字incrementCounter('purchase_number', 15210);

请添加图片描述

2、第二种

设置显示的时间的长短，比如下面我设置的是2秒内显示所有数字，不管是大的还是小的，都在2秒内完成，数字大的每毫秒显示的数字就大，数字小的每毫秒显示的数字就小，我以152和15210为例演示一下

function incrementCounter(counterId, targetNumber, duration = 2000) {const startTime = Date.now();const startNumber = parseInt(document.getElementById(counterId).textContent, 10) || 0; // 获取当前显示的数字，如果没有则默认为0const incrementAmount = (targetNumber - startNumber) / duration; // 计算每毫秒递增的量const intervalId = setInterval(() => {const elapsed = Date.now() - startTime;let currentNumber = startNumber + incrementAmount * elapsed;if (elapsed >= duration) {currentNumber = targetNumber;clearInterval(intervalId);}document.getElementById(counterId).textContent = Math.floor(currentNumber);}, 10); // 每10毫秒更新一次，可以根据需要调整
}incrementCounter('purchase_number', 152);
incrementCounter('purchase_number', 15210);

152的显示如下：
请添加图片描述
15210的显示如下：