带间隔的捐赠进度条运行异常，寻求修复方案

问题1：进度条从非起始位置启动+多次点击跳变 #

原因：

• JS初始逻辑中，第一次设置宽度就是stepValue + 10 = 10%，并非从0开始
• 重复点击按钮会创建多个定时器，进度条被多个进程同时修改，出现跳变甚至从中间启动

修复：

• 调整逻辑，从stepValue本身（0%）开始逐步累加宽度
• 点击按钮时先清除已有定时器，避免重复触发

问题2：移动呈间隔式跳跃 #

原因：

• CSS设置了transition: all 700ms ease，但JS的setInterval间隔仅500ms，动画未完成就强制修改宽度，导致视觉跳跃
• 每次步长10%，间隔大，流畅度不足

修复：

• 去掉CSS中的transition，改用JS控制小步长+短间隔实现平滑动画
• 把步长改为1%，定时器间隔调整为50ms，同时用全局变量存储定时器ID避免冲突

问题3：进度条出现无法去除的圆角 #

原因：

• 父容器.progress-bg设置了border-radius: 5px但未加overflow: hidden，进度条超出父容器圆角时，和阴影结合产生视觉圆角；或进度条宽度较小时，渐变背景与父容器圆角叠加造成错觉

修复：

• 若不需要父容器圆角，直接删除.progress-bg的border-radius属性
• 若保留父容器圆角，给.progress-bg添加overflow: hidden，让进度条被父容器圆角裁剪，消除异常视觉效果

修改后的完整代码 #

JavaScript

let progressInterval = null; // 全局存储定时器ID，避免重复触发

function move() {
  let elem = document.getElementById("progress-bar");
  let stepValue = 0;
  
  // 清除之前的定时器，重置进度条状态
  if (progressInterval) {
    clearInterval(progressInterval);
  }
  elem.style.width = "0%";
  elem.innerHTML = "0%";
  
  // 小步长+短间隔实现平滑动画
  progressInterval = setInterval(frame, 50);

  function frame() {
    if (stepValue >= 100) {
      clearInterval(progressInterval);
      progressInterval = null;
    } else {
      stepValue++;
      elem.style.width = stepValue + "%";
      elem.innerHTML = stepValue + "%";
    }
  }
}

CSS

body{
  max-width: 75%;
  margin: auto;
}

.progress-goals {
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
}

.progress-goals h3 {
  display: inline-block;
}

.progress-goals:last-child {
  flex: 1;
}

.progress-bg {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0px auto 0px;
  height: 78px;
  /* 可选：保留圆角则添加overflow: hidden，删除则去掉border-radius */
  /* border-radius: 5px; */
  overflow: hidden;
  -moz-box-shadow: inset 0 0 10px #ccc;
  -webkit-box-shadow: inset 0 0 10px #ccc;
  box-shadow: inset 0 0 10px #ccc;
}

.goal-bar {
  background-color: rgb(58, 58, 58);
  width: 5px;
  height: 78px;
  border-radius: 15px;
}

.progress-bar {
  display: block;
  height: 100%;
  width: 0%; /* 初始宽度设为0%更直观 */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.8) 18%,
    rgba(28, 53, 120, 0.8),
    rgba(220, 24, 27, 0.8)
  );
  position: absolute;
  overflow: hidden;
  font-size: 15px;
  text-align: center;
  color: white;
  /* 去掉transition，避免和JS定时器冲突 */
  /* transition: all 700ms ease; */
}

.progress-btn-container {
  display: grid;
  place-items: center;
  height: 50px;
}

.progress-btn {
  cursor: pointer;
  margin: auto;
  display: inline-block;
  color: #444;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #444;
  border-radius: 5px;
  text-transform: uppercase;
  font-family: inherit;
  font-weight: 600;
}

.progress-btn:hover {
  color: #555;
  background-color: #f1f1f1;
  padding: 9px;
  border: 1px solid #555;
}

HTML

<div class="progress-goals">
  <h3 class="no-goal">$0</h3>
  <h3 class="first-goal">$1,000</h3>
  <h3 class="second-goal">$10,000</h3>
  <h3 class="last-goal">$100,000</h3>
</div>

<div class="progress-bg" id="progress-bg">
  <div class="goal-bar"></div>
  <div class="goal-bar"></div>
  <div class="goal-bar"></div>
  <div class="goal-bar"></div>
  <div class="progress-bar" id="progress-bar"></div>        
</div>

<div class="progress-btn-container">
  <button class="progress-btn" onclick="move()">total donated</button>
</div>

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