如何在多个Div上复用JavaScript环形进度条函数？

要同时展示多个不同百分比的环形进度条并自动启动动画，只需把单个进度条的逻辑封装成可复用函数，给每个进度条绑定目标值，页面加载时批量触发动画即可。

修改后的完整代码 #

HTML

<div class="progress-container">
  <div class="cardHolder" data-target="50">
    <div class="skillFirst">
      <div class="skillSecond">
        <span class="skillContent"></span>
      </div>
    </div>
  </div>
  <div class="cardHolder" data-target="75">
    <div class="skillFirst">
      <div class="skillSecond">
        <span class="skillContent"></span>
      </div>
    </div>
  </div>
  <div class="cardHolder" data-target="90">
    <div class="skillFirst">
      <div class="skillSecond">
        <span class="skillContent"></span>
      </div>
    </div>
  </div>
  <div class="cardHolder" data-target="30">
    <div class="skillFirst">
      <div class="skillSecond">
        <span class="skillContent"></span>
      </div>
    </div>
  </div>
  <div class="cardHolder" data-target="60">
    <div class="skillFirst">
      <div class="skillSecond">
        <span class="skillContent"></span>
      </div>
    </div>
  </div>
</div>

CSS

.progress-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px;
}

.cardHolder {
  display: flex;
  justify-content: center;
  align-items: center;
  background: conic-gradient(rgb(15, 176, 6) 0deg, rgb(193, 193, 193) 0deg);
  width: 100px;
  height: 100px;
  border-radius: 100%;
}

.skillFirst {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #90697a;
  width: 80%;
  height: 80%;
  border-radius: 100%;
}

.skillSecond {
  font-family: 'Montserrat Subrayada', sans-serif;
  font-size: 24px;
}

JavaScript

// 封装环形进度条动画函数
function animateProgressBar(element) {
  const targetValue = parseInt(element.dataset.target);
  const textElement = element.querySelector('.skillSecond');
  let startValue = 0;
  const duration = 20;

  const progress = setInterval(() => {
    startValue++;
    textElement.textContent = `${startValue}%`;
    element.style.background = `conic-gradient(rgb(15, 176, 6) ${startValue * 3.6}deg, rgb(193, 193, 193) 0deg)`;
    
    if (startValue === targetValue) {
      clearInterval(progress);
    }
  }, duration);
}

// 页面加载完成后启动所有进度条动画
document.addEventListener('DOMContentLoaded', () => {
  const allProgressBars = document.querySelectorAll('.cardHolder');
  allProgressBars.forEach(bar => animateProgressBar(bar));
});

关键修改说明 #

• 自定义属性绑定目标值：给每个.cardHolder添加data-target属性，直接设置该进度条的目标百分比，无需修改JS代码即可新增或调整进度条
• 复用动画函数：把动画逻辑封装成独立函数，接收单个进度条元素作为参数，内部处理该元素的文本更新和背景渐变
• 批量触发动画：页面加载完成后，通过querySelectorAll获取所有进度条元素，遍历调用动画函数，实现同时启动
• 初始背景优化：把.cardHolder的初始渐变角度设为0deg，避免加载时出现初始的1%进度

内容的提问来源于stack exchange，提问作者A.rahman Shoukry