vue3数字滚动

const scrolledNumber1 = ref('')
const scrolledNumber2 = ref('')
const scrolledNumber3 = ref('')
// 千位分隔符进行格式化
function formatNumber(num) {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
// 数字滚动效果
function animateNumber(element, start, end, duration) {
    let current = start;
    let increment = Math.ceil((end - start) / (duration * 60)); // 根据指定的持续时间计算递增量

    const updateNumber = () => {
        current += increment;
        if (current <= end) {
            element.value = formatNumber(current) + "+";
            requestAnimationFrame(updateNumber);
        } else {
            element.value = formatNumber(end) + "+";
        }
    };
    updateNumber();
}
onMounted(() => {
    animateNumber(scrolledNumber1, 0, 41000, 1);
    animateNumber(scrolledNumber2, 0, 500000, 1);
    animateNumber(scrolledNumber3, 0, 3000, 1);
})