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); }); });