如何使用 JavaScript 创建多个独立控制的环形进度条-js教程-PHP中文网

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

本文详解如何为多个环形进度条分别绑定独立动画逻辑，解决 querySelectorAll 返回 NodeList 后无法逐个初始化的问题，通过容器隔离 + 循环遍历实现每个进度条按自身目标值独立运行。

本文详解如何为多个环形进度条分别绑定独立动画逻辑，解决 `queryselectorall` 返回 nodelist 后无法逐个初始化的问题，通过容器隔离 + 循环遍历实现每个进度条按自身目标值独立运行。

在实际开发中，我们常需在同一页面渲染多个环形进度条（例如展示不同技能的掌握程度），但若直接使用 document.querySelectorAll 获取所有 .circular-progress 和 .progress-value 元素，再统一操作，会导致逻辑错乱——因为所有进度条共享同一组变量（如 progressStartValue、progressEndValue），最终仅首个进度条能正常执行动画。

根本原因在于：DOM 查询返回的是静态节点集合，而动画逻辑需要为每个进度条维护独立的状态和定时器。正确的做法是「以容器为单位」进行封装：每个 .container 代表一个独立进度模块，我们在其作用域内查找子元素、读取目标值、启动专属定时器。

以下是优化后的完整实现方案：

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

✅ 正确初始化多个进度条（核心逻辑）

// 获取所有容器（每个 container 包含一个 circular-progress 和 progress-value）
const containers = document.querySelectorAll('.container');

containers.forEach(container => {
  const circularProgress = container.querySelector('.circular-progress');
  const progressValue = container.querySelector('.progress-value');

  // 读取目标百分比（注意：textContent 是字符串，需转为数字）
  const targetValue = parseInt(progressValue.textContent, 10);
  let current = 0;
  const speed = 20; // 每 20ms 增加 1%

  const timer = setInterval(() => {
    current++;

    // 更新显示文本（带 % 符号）
    progressValue.textContent = `${current}%`;

    // 动态计算 conic-gradient 角度：360° ÷ 100 = 3.6°/1%
    circularProgress.style.background = `conic-gradient(
      #7d2ae8 ${current * 3.6}deg,
      #ededed 0deg
    )`;

    if (current >= targetValue) {
      clearInterval(timer);
      // 可选：确保最终值精确显示（避免因取整导致 1px 偏差）
      progressValue.textContent = `${targetValue}%`;
      circularProgress.style.background = `conic-gradient(
        #7d2ae8 ${targetValue * 3.6}deg,
        #ededed 0deg
      )`;
    }
  }, speed);
});

⚠️ 关键注意事项

避免全局变量污染：current、targetValue、timer 等必须在 forEach 回调内声明，确保每个进度条拥有独立作用域；
数值类型转换：progressValue.textContent 返回字符串，务必用 parseInt(..., 10) 转为整数，否则 current == targetValue 判断会失败（如 "50" == 50 为 false）；
边界处理：动画结束时手动设置最终样式，防止因 setInterval 时间片误差导致角度不精确；
性能建议：若进度条数量较多（>20），可考虑使用 requestAnimationFrame 替代 setInterval 实现更平滑、更节能的动画。

? HTML 结构说明（保持语义清晰）

<div class="container">
  <div class="circular-progress"></div>
  <span class="progress-value">50</span>
  <span class="text">HTML & CSS</span>
</div>
<!-- 更多 .container -->