本文详解如何为多个环形进度条分别绑定独立动画逻辑，解决 querySelectorAll 返回 NodeList 后无法逐个初始化的问题，通过容器隔离 + 循环遍历实现每个进度条按自身目标值独立运行。
本文详解如何为多个环形进度条分别绑定独立动画逻辑，解决 `queryselectorall` 返回 nodelist 后无法逐个初始化的问题，通过容器隔离 + 循环遍历实现每个进度条按自身目标值独立运行。
在实际开发中，我们常需在同一页面渲染多个环形进度条（例如展示不同技能的掌握程度），但若直接使用 document.querySelectorAll 获取所有 .circular-progress 和 .progress-value 元素，再统一操作，会导致逻辑错乱——因为所有进度条共享同一组变量（如 progressStartValue、progressEndValue），最终仅首个进度条能正常执行动画。
根本原因在于：DOM 查询返回的是静态节点集合，而动画逻辑需要为每个进度条维护独立的状态和定时器。正确的做法是「以容器为单位」进行封装：每个 .container 代表一个独立进度模块，我们在其作用域内查找子元素、读取目标值、启动专属定时器。
以下是优化后的完整实现方案：
✅ 正确初始化多个进度条（核心逻辑）
// 获取所有容器（每个 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 -->
? 提示：.progress-value 元素应置于 .circular-progress 内部或同级，但本例中将其放在 .circular-progress 内部更符合语义（即“进度值属于该进度条”）。CSS 中已通过 flex 居中，无需额外定位。
立即学习“Java免费学习笔记（深入）”；
通过上述方法，你可轻松扩展任意数量的环形进度条，每个都根据自身 data-* 属性或内联文本独立运行动画，彻底摆脱“只生效第一个”的常见陷阱。
