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

写JavaScript 实现数字递增的效果

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

1、第一种

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

function incrementCounter(counterId, targetNumber, stepDuration = 10) {
        // 初始化当前数字为0
        let currentNumber = 0;
        // 每次递增的数量
        const incrementAmount = 123;

        // 设置一个定时器，每隔 stepDuration 毫秒执行一次
        const intervalId = setInterval(() => {
            // 每次增加 incrementAmount
            currentNumber += 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; // 获取当前显示的数字，如果没有则默认为0
    const 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的显示如下：