js脚本怎么实现数字递增动画_js数字滚动递增效果脚本编写

function animateNumber(elementId, start, end, duration) {
  const element = document.getElementById(elementId);
  let current = start;
  const range = end - start;
  const increment = range > 0 ? Math.ceil(range / (duration / 16)) : 0; // 每帧增加量
  const timer = setInterval(() => {
    current += increment;
    if (current >= end) {
      current = end;
      clearInterval(timer);
    }
    element.textContent = current.toLocaleString(); // 格式化千分位
  }, 16); // 约 60fps
}
// 调用示例
animateNumber("count", 0, 12345, 2000); // 2秒内从0到12345

function animateNumberRAF(elementId, endValue, duration = 2000) {
  const element = document.getElementById(elementId);
  const startValue = parseInt(element.textContent.replace(/,/g, '')) || 0;
  const startTime = performance.now();
<p>function update(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);</p><pre class='brush:php;toolbar:false;'>const currentValue = Math.floor(
  startValue + (endValue - startValue) * progress
);

element.textContent = currentValue.toLocaleString();

if (progress < 1) {
  requestAnimationFrame(update);
}

function animateDecimal(elementId, endValue, decimals = 2, duration = 2000) {
  const element = document.getElementById(elementId);
  const startValue = parseFloat(element.textContent) || 0;
  const startTime = performance.now();
<p>function update(time) {
const elapsed = time - startTime;
const progress = Math.min(elapsed / duration, 1);
const currentValue = startValue + (endValue - startValue) * progress;</p><pre class='brush:php;toolbar:false;'>element.textContent = currentValue.toFixed(decimals);

if (progress < 1) {
  requestAnimationFrame(update);
}

<div id="count">0</div>
<div id="price">0.00</div>