JS响应式进度条点击按钮按百分比递增时无法均匀增长问题

你的实现逻辑存在单位混用的错误：

• progressBar.clientWidth 返回的是进度条当前渲染的像素宽度数值，不是你设置的百分比值
• 你把像素数值直接拼接%设置宽度，相当于把像素数当成百分比基数计算：假设父容器宽度为600px，第一次点击后宽度设为10%，对应60px像素宽；第二次点击时拿到的currWidth是60，计算后宽度变成70%；第三次点击时拿到的宽度是420px，计算后直接变成430%，完全超出容器，增量自然不可能均匀。

单独用变量维护当前的进度百分比数值，不要从DOM的像素属性反推进度，既能保证每次固定增量递增，也完全保留容器的响应式特性——父容器宽度随窗口变化时，进度条会自动按当前百分比适配宽度，不需要额外做像素换算。

修正后完整代码如下：

<div class="progress-container">
  <div class="progress-bar"></div>
</div>
<button onclick="increaseProgress()">Click to increase</button>

<style>
.progress-container {
  width: 100%;
  height: 20px;
  outline: solid 2px #ccc;
  border-radius: 20px;
}

.progress-bar {
  width: 0;
  height: inherit;
  background: blue;
  border-radius: 20px;
  transition: width 0.2s ease; /* 可选：添加过渡让进度变化更顺滑 */
}
</style>

<script>
// 独立存储当前进度百分比，初始值为0
let currentProgress = 0;
function increaseProgress() {
  const progressBar = document.querySelector(".progress-bar");
  // 每次固定增长10个百分点，最大不超过100%
  currentProgress = Math.min(currentProgress + 10, 100);
  progressBar.style.width = `${currentProgress}%`;
}
</script>

补充说明：如果后续需要支持重置、减少进度等操作，只需要修改currentProgress变量的值再同步给DOM即可，逻辑始终稳定，不会受容器尺寸变化影响。

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