原生JS实现滑动到当前数字模块数字递增动画

源码：

两种递增分别是：

1、百分数递增

2、数字递增后添加文案

<div style="height: 1500px;"></div>  
<p class="number-module2" data-start="0" data-end="90" data-duration="1000">0%</p>  
<p class="number-module3" data-start="0" data-end="2" data-duration="1000">0</p>
<p class="number-module1" data-start="0" data-end="200" data-duration="1000">0</p>


<div style="height: 500px;"></div>  
  
<script>
// w+
document.addEventListener("DOMContentLoaded", function() {  
    const numberModules1 = document.querySelectorAll('.number-module1');  
  
    const observer = new IntersectionObserver((entries) => {  
        entries.forEach(entry => {  
            if (entry.isIntersecting) {  
                const module = entry.target;  
                const start = parseInt(module.getAttribute('data-start'), 10);  
                const end = parseInt(module.getAttribute('data-end'), 10);  
                const duration = parseInt(module.getAttribute('data-duration'), 10);  
  
                animateNumber1(module, start, end, duration, 'w+');    
  
                // 如果你只想触发一次动画，可以取消观察  
                observer.unobserve(module);  
            }  
        });  
    });  
  
    numberModules1.forEach(module => observer.observe(module));  
});  
  
function animateNumber1(element, start, end, duration, suffix = '') {  
    let startTime = null;  
  
    const animation1 = function(currentTime) {  
        if (startTime === null) startTime = currentTime;  
        const progress = Math.min((currentTime - startTime) / duration, 1);  
        const value = Math.floor(progress * (end - start) + start);  
        element.textContent = value.toString();  
  
        if (progress < 1) {  
            requestAnimationFrame(animation1);  
        } else {
            // 动画结束时添加 w+
            element.textContent += suffix;
        }
    };  
  
    requestAnimationFrame(animation1);  
}


// /
document.addEventListener("DOMContentLoaded", function() {  
    const numberModules3 = document.querySelectorAll('.number-module3');  
  
    const observer = new IntersectionObserver((entries) => {  
        entries.forEach(entry => {  
            if (entry.isIntersecting) {  
                const module = entry.target;  
                const start = parseInt(module.getAttribute('data-start'), 10);  
                const end = parseInt(module.getAttribute('data-end'), 10);  
                const duration = parseInt(module.getAttribute('data-duration'), 10);  
  
                animateNumber3(module, start, end, duration, '/3');   
  
                // 如果你只想触发一次动画，可以取消观察  
                observer.unobserve(module);  
            }  
        });  
    });  
  
    numberModules3.forEach(module => observer.observe(module));  
});  
  
function animateNumber3(element, start, end, duration, suffix = '') {  
    let startTime = null;  
  
    const animation3 = function(currentTime) {  
        if (startTime === null) startTime = currentTime;  
        const progress = Math.min((currentTime - startTime) / duration, 1);  
        const value = Math.floor(progress * (end - start) + start);  
        element.textContent = value.toString();  
  
        if (progress < 1) {  
            requestAnimationFrame(animation3);  
        } else {
            // 动画结束时添加 /3
            element.textContent += suffix;
        } 
    };  
  
    requestAnimationFrame(animation3);  
}

// %
document.addEventListener("DOMContentLoaded", function() {
const numberModules2 = document.querySelectorAll('.number-module2');
const observer = new IntersectionObserver((entries) => {  
    entries.forEach(entry => {  
        if (entry.isIntersecting) {  
            const module = entry.target;  
            const start = parseInt(module.getAttribute('data-start'), 10);  
            const end = parseInt(module.getAttribute('data-end'), 10);  
            const duration = parseInt(module.getAttribute('data-duration'), 10);  
 
            animateNumber2(module, start, end, duration);  
 
            // 如果你只想触发一次动画，可以取消观察  
            observer.unobserve(module);  
        }  
    });  
});  
 
numberModules2.forEach(module => observer.observe(module));
});

function animateNumber2(element, start, end, duration) {
let startTime = null;
const animation2 = function(currentTime) {  
    if (startTime === null) startTime = currentTime;  
    const progress = Math.min((currentTime - startTime) / duration, 1);  
    const value = Math.floor(progress * (end - start) + start);  
    // 将值转换为百分数并更新元素文本  
    element.textContent = value + '%';  
 
    if (progress < 1) {  
        requestAnimationFrame(animation2);  
    }  
};  
 
requestAnimationFrame(animation2);
}
</script>