document.addEventListener('DOMContentLoaded', () => {
    const elements = document.querySelectorAll('.perCent');
    
    const animatePercentage = (element) => {
        // 添加可见类，触发CSS过渡效果
        element.classList.add('visible');
        
        let current = 1;
        const target = parseInt(element.getAttribute('data-target'));
        
        // 重置为初始值
        element.textContent = '1%';
        
        const timer = setInterval(() => {
            current += 1;
            element.textContent = `${current}%`;
            
            if (current >= target) {
                clearInterval(timer);
            }
        }, 30);
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                animatePercentage(entry.target);
            } else {
                // 当元素离开视口时
                entry.target.classList.remove('visible');
                entry.target.textContent = '1%';  // 重置为初始值
            }
        });
    }, {
        threshold: 0.5,
        rootMargin: '0px'
    });

    elements.forEach(element => {
        // 初始状态设置
        element.classList.remove('visible');
        element.textContent = '1%';
        observer.observe(element);
    });
});