当前位置：首页 > JavaScript

js 实现滚动数字

2026-03-01 04:55:13JavaScript

实现滚动数字的几种方法

使用 CSS 动画 + JavaScript

CSS 的 transition 和 transform 属性可以结合 JavaScript 实现平滑的数字滚动效果。通过改变数字元素的 translateY 属性，可以模拟数字滚动的视觉效果。

js 实现滚动数字

const numberElement = document.getElementById('number');
let currentNumber = 0;

function scrollNumber(targetNumber) {
  const duration = 1000; // 动画持续时间（毫秒）
  const startTime = performance.now();

  function updateNumber(timestamp) {
    const elapsed = timestamp - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const easedProgress = easeOutQuad(progress);
    const newNumber = Math.floor(easedProgress * (targetNumber - currentNumber) + currentNumber);

    numberElement.textContent = newNumber;

    if (progress < 1) {
      requestAnimationFrame(updateNumber);
    } else {
      currentNumber = targetNumber;
    }
  }

  requestAnimationFrame(updateNumber);
}

function easeOutQuad(t) {
  return t * (2 - t);
}

// 示例：滚动到数字 100
scrollNumber(100);

使用 setInterval 实现逐步递增

通过 setInterval 逐步增加数字的值，直到达到目标数字。这种方法简单直接，适合不需要复杂动画的场景。

js 实现滚动数字

function animateNumber(elementId, targetNumber, duration = 1000) {
  const element = document.getElementById(elementId);
  const startNumber = parseInt(element.textContent) || 0;
  const increment = targetNumber > startNumber ? 1 : -1;
  const stepTime = Math.abs(Math.floor(duration / (targetNumber - startNumber)));

  const timer = setInterval(() => {
    const currentNumber = parseInt(element.textContent);
    if ((increment > 0 && currentNumber >= targetNumber) || 
        (increment < 0 && currentNumber <= targetNumber)) {
      clearInterval(timer);
    } else {
      element.textContent = currentNumber + increment;
    }
  }, stepTime);
}

// 示例：从 0 滚动到 1000
animateNumber('number', 1000, 2000);

使用 GSAP 动画库

GSAP（GreenSock Animation Platform）是一个强大的动画库，可以轻松实现复杂的数字滚动效果。

import { gsap } from 'gsap';

function animateWithGSAP(targetNumber, duration = 1) {
  gsap.to('#number', {
    duration: duration,
    innerText: targetNumber,
    snap: { innerText: 1 },
    ease: 'power2.out'
  });
}

// 示例：滚动到数字 500
animateWithGSAP(500, 2);

使用 requestAnimationFrame 实现高性能动画

requestAnimationFrame 是浏览器提供的动画 API，性能优于 setInterval，适合需要平滑动画的场景。

function animateNumberRAF(elementId, targetNumber, duration = 1000) {
  const element = document.getElementById(elementId);
  const startNumber = parseInt(element.textContent) || 0;
  const startTime = performance.now();

  function updateNumber(timestamp) {
    const elapsed = timestamp - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const currentNumber = Math.floor(progress * (targetNumber - startNumber) + startNumber);
    element.textContent = currentNumber;

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

  requestAnimationFrame(updateNumber);
}

// 示例：滚动到数字 200
animateNumberRAF('number', 200, 1500);