本文主要是介绍原生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 {// 动画结束时添加 /3element.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>这篇关于原生JS实现滑动到当前数字模块数字递增动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
