纯JavaScript实现页面加载时从0计数至指定值的计数器

没问题！我来帮你把这个jQuery计数器转换成纯JavaScript版本，功能和你原来的代码完全一致——页面加载时从0开始计数，最终停在HTML里定义的目标数值，动画时长和缓动效果也和原代码保持一致～

先看HTML结构 #

不需要引入jQuery了，直接保留你的计数器元素就行：

<span class="count">200</span>%
<!-- 可以添加多个计数器，代码会自动处理 -->
<span class="count">5000</span>
<span class="count">1234</span>

纯JavaScript实现代码 #

这段代码完美复刻了原jQuery版本的逻辑，包括4秒的动画时长、swing缓动效果，以及每一步向上取整的显示规则：

document.addEventListener('DOMContentLoaded', function() {
  // 选中所有带count类的元素
  const counters = document.querySelectorAll('.count');
  
  counters.forEach(counter => {
    // 提取目标数值并转为整数
    const target = parseInt(counter.textContent.trim());
    let current = 0;
    const duration = 4000; // 动画时长，和原代码一致为4秒
    const startTime = performance.now();
    
    // 定义动画更新函数
    function updateCounter(timestamp) {
      // 计算动画完成的进度比例（0到1）
      const elapsed = timestamp - startTime;
      const progress = Math.min(elapsed / duration, 1);
      
      // 实现jQuery的swing缓动效果（easeInOutQuad曲线）
      const easedProgress = progress < 0.5 
        ? 2 * progress * progress 
        : -1 + (4 - 2 * progress) * progress;
      
      // 计算当前要显示的数值，向上取整
      current = Math.ceil(target * easedProgress);
      counter.textContent = current;
      
      // 动画未完成就继续执行下一帧
      if (progress < 1) {
        requestAnimationFrame(updateCounter);
      } else {
        // 最后确保显示准确的目标值（避免取整误差）
        counter.textContent = target;
      }
    }
    
    // 启动计数器动画
    requestAnimationFrame(updateCounter);
  });
});

代码说明 #

• DOMContentLoaded：确保页面元素加载完成后再执行代码，和jQuery的$(document).ready()作用一致
• requestAnimationFrame：浏览器原生的动画API，比setInterval更流畅，能自动适配屏幕刷新率
• swing缓动：还原了jQuery默认的swing动画曲线，让计数过程更自然，不是生硬的线性增长
• 边界处理：最后强制设置为目标值，避免因为向上取整导致最终数值和目标有偏差

如果不需要缓动效果，想改成线性增长，只需要把easedProgress替换成progress就行～

内容的提问来源于stack exchange，提问作者TinyTiger