如何使用 JavaScript 创建多个独立运行的环形进度条

如何为多个环形进度条绑定独立动画：告别“仅第一个生效”的陷阱

在开发仪表盘或数据看板时，我们常常需要同时渲染多个环形进度条，用来展示像技能掌握度、任务完成率这类指标。但一个常见的“坑”是：代码写完后，只有第一个进度条在动，后面的全都“躺平”了。这问题出在哪？根源往往在于DOM查询和状态管理的方式——如果粗暴地一次性选中所有元素统一操作，变量和定时器就会互相打架，最终只有“胜出”的那个能正常执行。

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

那么，正确的思路是什么？核心在于作用域隔离。我们需要把每个进度条连同它的容器看作一个独立的模块，为每个模块单独管理其状态和动画逻辑。这样一来，无论页面上有多少个进度条，它们都能井水不犯河水，各自流畅运行。

✅ 正确实现步骤

要实现这种隔离，关键在于改变遍历的维度。别再直接去抓所有 .circular-progress 元素了，而是应该以容器为单位，逐个击破。

1. 按容器遍历：首先，使用 document.querySelectorAll(‘.container’) 获取页面上所有的容器节点。这一步是建立独立作用域的基础。
2. 作用域内查询：接着，在遍历每个容器时，只在这个容器的范围内查找它专属的 .circular-progress 和 .progress-value 元素。这就确保了每个进度条操作的都是自己的DOM节点。
3. 独立状态管理：为每一个进度条实例单独声明其状态变量，比如动画起始值、目标结束值以及动画速度。这些变量被封闭在各自的作用域里，自然不会互相覆盖。
4. 独立定时器控制：最后，为每个进度条启动自己独立的 setInterval 计时器。当某个进度条动画完成时，只清除它自己的定时器，完全不会影响到其他正在运行的进度条。

按照这个思路，下面是一段完整、可直接运行的Ja vaScript实现代码：

const containers = document.querySelectorAll(‘.container’);
containers.forEach(container => {
  const circularProgress = container.querySelector(‘.circular-progress’);
  const progressValue = container.querySelector(‘.progress-value’);
  // 确保文本内容为数字（兼容空格或单位）
  const targetValue = parseInt(progressValue.textContent.trim(), 10) || 0;
  let progressStartValue = 0;
  const speed = 15; // 可按需调整动画速度
  const progress = setInterval(() => {
    progressStartValue++;
    // 更新显示数值（带 % 符号）
    progressValue.textContent = `${progressStartValue}%`;
    // 动态更新 conic-gradient 背景角度（360° ÷ 100 = 3.6°/1%）
    circularProgress.style.background = `conic-gradient(
      #7d2ae8 ${progressStartValue * 3.6}deg,
      #ededed 0deg
    )`;
    if (progressStartValue >= targetValue) {
      clearInterval(progress);
      // 可选：确保最终值精确显示（避免因四舍五入偏差）
      progressValue.textContent = `${targetValue}%`;
      circularProgress.style.background = `conic-gradient(
        #7d2ae8 ${targetValue * 3.6}deg,
        #ededed 0deg
      )`;
    }
  }, speed);
});

⚠️ 注意事项

掌握了核心方法，再注意几个细节，能让你的实现更加稳健和高效：

• 避免 innerText 误读：原代码中直接在NodeList上使用 innerText 是无效的，务必先定位到单个具体元素再读取其文本内容。
• 防止重复初始化：确保脚本在DOM内容加载完成后执行，最简单的方法是将代码包裹在 DOMContentLoaded 事件监听器中。
• 性能优化建议：如果页面需要同时动画的进度条数量非常多（比如超过10个），可以考虑用 requestAnimationFrame 替代 setInterval。这能带来更流畅的动画效果和更好的电池续航表现。
• 样式健壮性：为 .circular-progress 元素设置一个初始的 conic-gradient 背景样式，可以避免动画第一帧可能出现的闪烁问题。
• 语义化增强：别忘了可访问性。为每个进度条添加 aria-valuenow 和 aria-valuemax 属性，能极大帮助使用屏幕阅读器的用户理解当前进度。

采用这种“容器驱动、实例隔离”的设计模式，好处是显而易见的。你不仅能轻松管理任意数量的进度条，还能为每个进度条单独配置不同的颜色主题、动画速度甚至缓动函数。这实际上是将进度条封装成了一个高度模块化、可复用的UI组件，无论是维护还是扩展，都变得轻而易举。

立即学习“Ja va免费学习笔记（深入）”；