如何使用 JavaScript 创建多个独立运行的环形进度条
如何为多个环形进度条绑定独立动画：告别“仅第一个生效”的陷阱
在开发仪表盘或数据看板时，我们常常需要同时渲染多个环形进度条，用来展示像技能掌握度、任务完成率这类指标。但一个常见的“坑”是：代码写完后，只有第一个进度条在动，后面的全都“躺平”了。这问题出在哪？根源往往在于DOM查询和状态管理的方式——如果粗暴地一次性选中所有元素统一操作，变量和定时器就会互相打架，最终只有“胜出”的那个能正常执行。
免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈
那么，正确的思路是什么？核心在于作用域隔离。我们需要把每个进度条连同它的容器看作一个独立的模块，为每个模块单独管理其状态和动画逻辑。这样一来，无论页面上有多少个进度条，它们都能井水不犯河水，各自流畅运行。
✅ 正确实现步骤
要实现这种隔离，关键在于改变遍历的维度。别再直接去抓所有 .circular-progress 元素了，而是应该以容器为单位，逐个击破。
- 按容器遍历：首先，使用
document.querySelectorAll(‘.container’)获取页面上所有的容器节点。这一步是建立独立作用域的基础。 - 作用域内查询：接着，在遍历每个容器时，只在这个容器的范围内查找它专属的
.circular-progress和.progress-value元素。这就确保了每个进度条操作的都是自己的DOM节点。 - 独立状态管理：为每一个进度条实例单独声明其状态变量，比如动画起始值、目标结束值以及动画速度。这些变量被封闭在各自的作用域里，自然不会互相覆盖。
- 独立定时器控制：最后，为每个进度条启动自己独立的
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免费学习笔记（深入）”；
相关攻略
如何为多个环形进度条绑定独立动画：告别“仅第一个生效”的陷阱 在开发仪表盘或数据看板时，我们常常需要同时渲染多个环形进度条，用来展示像技能掌握度、任务完成率这类指标。但一个常见的“坑”是：代码写完后，只有第一个进度条在动，后面的全都“躺平”了。这问题出在哪？根源往往在于DOM查询和状态管理的方式——
script标签放head还是body？一个关于时机与风险的决策 关于script标签该放在还是，其实没有唯一的“标准答案”。这更像是一个权衡：你的脚本是否需要访问DOM？它是否依赖页面结构？以及，你愿意为它的加载时机承担多大的渲染阻塞风险？说到底，这不是“哪个更好”，而是“哪个更合适”的问题。 脚
如何利用 Temporal 提案解决 Ja vaScript 中历史悠久的 Date 时区偏移坑 面对 Ja vaScript 中那个老生常谈的 Date 时区问题，Temporal 提案确实提供了一条出路。但这条路并非简单的“升级”，而是一场彻底的“替换”——你必须放弃所有对 Date 实例的直接
Ja vaScript中undefined作为局部变量名的潜在风险 在函数作用域里，把 undefined 当成局部变量名来用，这事儿听起来好像没什么大不了？但实际情况是，它就像在代码里埋下了一颗隐蔽的地雷——它会悄无声息地覆盖掉该作用域内原本指向全局的 undefined 值。后果是什么？类型判断
文章目录 一、Ja va 8：现代编程的黎明时刻 二、Ja va 9-11：模块化革命与性能飞跃 三、Ja va 12-17：语法糖与性能优化齐飞 四、Ja va 18-21：未来已来的黑科技 五、升级指南：老项目如何拥抱新版本？ 六、未来展望：Ja va还能再战多少年？ 如果回顾过去十年的编程语言
热门专题
热门推荐
微软调整XGP战略：降价与《使命召唤》延期入库的背后 最近游戏圈有个大消息：微软宣布下调Xbox Game Pass Ultimate和PC Game Pass的月度订阅价格。具体来看，Ultimate档位从每月29 99美元降到了22 99美元，PC Game Pass则从16 49美元降至13
2026年，Xbox新掌门的第一把火：Game Pass要变“自助餐”了 2026年2月，阿莎·夏尔马接棒菲尔·斯宾塞，成为Xbox的新任CEO。这位新官上任，动作可谓雷厉风行。就在昨天，她点燃了第一把火：Xbox Game Pass Ultimate的月费，从29 99美元直接降到了22 99美元
当明星演员想开游戏工作室：资深同行为何直言“别这么做”？ 最近，游戏圈里发生了一场有趣的隔空对话。为《最后生还者》《死亡搁浅》等大作献声的知名演员特洛伊·贝克，在采访中透露了一个雄心勃勃的计划：他想创立自己的游戏工作室，去讲述“自己的故事”。他甚至提到，自己的灵感来源之一，正是曾为《刺客信条：起源》
Steam新款手柄评测视频意外流出，定价信息同步曝光 游戏硬件圈最近有个不大不小的“意外”。根据海外多个科技消息源的报道，Valve即将推出的新款Steam Controller手柄，其评测视频竟然提前在网上泄露了。更关键的是，视频里还直接公布了这款产品的售价：99美元。 事情是这样的：一个名为“T
此前，外网消息源透露，目前PlayStation在PS4和PS5的数字版游戏中加入了DRM验证（正版在线验证）机制。 前情提要>> 简单来说，这个新机制的效果是这样的：从今往后，如果你通过数字商店购买新游戏，那么主机就必须定期连接到PSN网络进行正版验证。具体规则是，如果主机连续超过30天处于离线状