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

本文讲解如何为多个环形进度条分别绑定独立动画逻辑，解决因 dom 查询方式不当导致仅首个进度条生效的问题，核心是通过容器作用域隔离每个进度条的状态与定时器。

本文讲解如何为多个环形进度条分别绑定独立动画逻辑，解决因 dom 查询方式不当导致仅首个进度条生效的问题，核心是通过容器作用域隔离每个进度条的状态与定时器。

在实际项目中，常需在同一页面渲染多个环形进度条（如技能掌握度、任务完成率等），但若直接使用 document.querySelectorAll 获取所有 .circular-progress 和 .progress-value 元素后统一操作，会因变量覆盖和定时器混用导致仅第一个进度条正常执行——这是因为 progressEndValue、circularProgress 等变量被重复赋值，且 setInterval 未按实例隔离。

正确的做法是：以 .container 为作用域单元，逐个初始化每个进度条的独立状态与动画逻辑。这样每个进度条拥有专属的起始值、目标值、计时器和样式更新路径，互不干扰。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

✅ 正确实现步骤

按容器遍历：使用 document.querySelectorAll('.container') 或 getElementsByClassName('container') 获取所有容器节点；
作用域内查询：对每个容器调用 container.querySelector() 分别获取其内部的 .circular-progress 和 .progress-value 元素；
独立状态管理：为每个进度条声明独立的 progressStartValue、progressEndValue 和 speed；
独立定时器控制：每个 setInterval 仅作用于当前进度条，到达目标值后单独 clearInterval。

以下是完整可运行的 JavaScript 实现：

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);
});