当前位置：首页 > JavaScript

js实现数字显示

2026-04-07 15:55:17JavaScript

数字显示的基本方法

在JavaScript中显示数字可以通过多种方式实现，具体取决于使用场景和需求。以下是常见的几种方法：

直接输出数字

console.log(123); // 控制台输出数字
document.write(456); // 页面直接写入数字

通过DOM操作显示数字

const num = 789;
document.getElementById("display").innerText = num;

格式化数字显示

js实现数字显示

const price = 1234.56;
console.log(price.toFixed(2)); // 显示为"1234.56"
console.log(price.toLocaleString()); // 本地化格式，如"1,234.56"

动态数字显示效果

对于需要动画效果的数值变化，可以使用以下方法：

简单递增动画

function animateValue(id, start, end, duration) {
  const obj = document.getElementById(id);
  let startTimestamp = null;
  const step = (timestamp) => {
    if (!startTimestamp) startTimestamp = timestamp;
    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
    obj.innerHTML = Math.floor(progress * (end - start) + start);
    if (progress < 1) {
      window.requestAnimationFrame(step);
    }
  };
  window.requestAnimationFrame(step);
}
animateValue("counter", 0, 100, 2000);

带格式化的计数器

js实现数字显示

function formatNumber(num) {
  return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
}

function runCounter(target, finalValue, duration) {
  let current = 0;
  const increment = finalValue / (duration / 16);
  const timer = setInterval(() => {
    current += increment;
    if (current >= finalValue) {
      clearInterval(timer);
      current = finalValue;
    }
    target.textContent = formatNumber(Math.floor(current));
  }, 16);
}

数字显示的高级应用

大数字缩写显示

function abbreviateNumber(num) {
  const units = ['k', 'M', 'B', 'T'];
  const tier = Math.log10(num) / 3 | 0;
  if (tier === 0) return num;
  const suffix = units[tier - 1];
  const scale = Math.pow(10, tier * 3);
  const scaled = num / scale;
  return scaled.toFixed(1) + suffix;
}

数字滚动效果

class DigitScroller {
  constructor(element, options = {}) {
    this.element = element;
    this.duration = options.duration || 1000;
    this.delay = options.delay || 16;
    this.currentValue = 0;
  }

  scrollTo(target) {
    const steps = this.duration / this.delay;
    const increment = (target - this.currentValue) / steps;
    let stepCount = 0;

    const interval = setInterval(() => {
      this.currentValue += increment;
      stepCount++;

      if (stepCount >= steps) {
        this.currentValue = target;
        clearInterval(interval);
      }

      this.element.textContent = Math.round(this.currentValue);
    }, this.delay);
  }
}