环形Progress Bar目标值超100时进度显示异常问题求助

当前代码的核心问题是：当data-degree大于100时，锥形渐变直接使用degree%作为填充比例，导致进度条在degree达到100时就完全填满，但数字仍会继续递增到目标值。进度条的填充逻辑没有与目标值挂钩，无法体现当前数值相对于目标值的完成比例。

修改进度条填充比例的计算逻辑，将填充百分比改为(当前数值 / 目标数值) * 100，这样无论目标值是多少，进度条都会按比例填充：

• 若目标值为200，当前数值到100时进度条填充50%，到200时填充100%
• 若目标值≤100，逻辑依然成立，比如目标值50，当前数值到50时进度条填充100%

同时优化细节：使用textContent替代innerHTML设置纯文本（更安全），修复模板字符串中的转义字符问题。

JavaScript #

window.addEventListener("load", function(event){
  let circle = document.querySelectorAll('.circle');
  circle.forEach(function(progress){
    let degree = 0;
    const targetDegree = parseInt(progress.getAttribute('data-degree'));
    const color = progress.getAttribute('data-color');
    const number = progress.querySelectorAll('.number');
    const childNumber = progress.querySelectorAll('.totalfilling');
    
    const interval = setInterval(function(){
      degree += 1;
      if(degree > targetDegree){
        clearInterval(interval);
        return;
      }
      
      // 计算相对于目标值的填充百分比
      const fillPercentage = (degree / targetDegree) * 100;
      progress.style.background = `conic-gradient(${color} ${fillPercentage}%, #222 0%)`;
      
      number[0].textContent = degree;
      number[0].style.color = color;
      childNumber[0].innerHTML = `<h5>${targetDegree}</h5>`;
    }, 50);
  });
});

CSS #

*
{
  margin:0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.container{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
.container .circle{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
.container .circle::before{
  content: '';
  position:absolute;
  inset: 5px;
  border-radius: 50%;
  background: #222;
  opacity: 0.8;
}
.container .circle::after{
  content: '';
  position:absolute;
  width:120px;
  height: 120px;
  border-radius: 50%;
  background: #fff;
  border: 15px solid #4d4c51;
  box-shadow: inset 0 5px 10px rgba(0,0,0,0.25),
  0 10px 10px rgba(0,0,0,0.75),
  0 -2px 2px rgba(255,255,255,0.5),
  inset 0 4px 2px rgba(0,0,0,0.25),
  inset 0 -2px 2px rgba(255,255,255,0.5);
}
.container .circle .number{
  position:relative;
  color: #fff;
  z-index: 10;
  line-height: 1em;
  font-size: 2em;
}
.container .circle .number span{
  font-size: 0.5em;
  font-weight: 500;
}
.container .circle h4{
  position:relative;
  color: #0b60e9;
  z-index: 10;
  font-weight: 500;
  font-size: 0.8em;
  line-height: 0.6em;
}
.countperhour{
    margin-left:40px;
    font-size:18px;
}
.totalfilling{
    margin-top:10px;
    color: black;
  z-index: 10;
  font-weight: 500;
  font-size: 18px;
  line-height: 0.6em;
}

HTML #

<div class="App">
  <div class="container">
    <div class="circle" data-degree="200" data-color="#0b60e9">
      <div class="countperhour">
        <h4>C/h</h4>
      </div>
      <h2 class="number"></h2>
      <div class="totalfilling">
        <h5>1000</h5>
      </div>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Vicky