基于目标完成百分比的进度条实现问题求助

我正在尝试制作一个可更新的进度条，用于显示玩家距离购买升级道具的进度。以下是我已完成的HTML和CSS代码：

HTML代码 #

<!-- Progress Bar -->
<div id="Progress">
  <div id="progressBar">1%</div>
</div>

CSS代码 #

/* Progress Bar */
#Progress {
  width: 100%;    
  background-color: black;
}

#progressBar {
  width: 1%;
  height: 40px;
  background-color: purple;
  text-align: center;
  line-height: 40px;
  color: white;
}

我尝试了如下JavaScript代码但无法正常工作：

document.getElementById("progressBar").style.width = (gameData.gems / gameData.prestigeMultiCost)

此外，我还尝试实现随钻石数量（上限1000）从白色过渡到深金色的背景颜色变化，最终通过修正空格问题解决了该问题：

window.setInterval(function () {
    document.body.style.backgroundColor = " rgb (255, " + (255 - (gameData.diamonds * 0.039)) + ", " + (255 - (gameData.diamonds * 0.255)) + ")"
}, 10)

现求助正确的JavaScript进度条实现方案。

你的JavaScript代码有两个核心问题，修正后即可正常工作：

1. 缺少CSS单位：width属性必须带单位（如%），直接赋值数值浏览器无法识别。
2. 未限制进度范围：需确保进度不会超过100%（避免溢出容器）或低于0%。

完整实现代码 #

// 定义进度条更新函数
function updateProgressBar() {
  const progressBar = document.getElementById("progressBar");
  // 计算百分比并限制在0-100之间
  let progressPercent = (gameData.gems / gameData.prestigeMultiCost) * 100;
  progressPercent = Math.max(0, Math.min(100, progressPercent));
  
  // 更新进度条宽度和显示文本
  progressBar.style.width = `${progressPercent}%`;
  progressBar.textContent = `${Math.round(progressPercent)}%`;
}

// 同步更新进度条与背景色
window.setInterval(function () {
  updateProgressBar();
  // 优化后的背景色代码（移除多余空格）
  document.body.style.backgroundColor = `rgb(255, ${255 - (gameData.diamonds * 0.039)}, ${255 - (gameData.diamonds * 0.255)})`;
}, 10);

关键说明 #

• 单位补充：通过模板字符串给数值添加%单位，符合CSS语法要求。
• 范围控制：用Math.max和Math.min确保进度始终在0%-100%区间内，避免异常显示。
• 文本同步：将进度百分比同步到进度条的文本内容，让玩家直观看到当前进度。
• 性能优化：将进度条和背景色更新放在同一个定时器中，减少重复定时器的性能消耗。

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