在HTML/Javascript中自动将数字转换为彩色条

<div class="color-bar">
  <span class="color-bar-value">0</span>
</div>

.color-bar {
  display: flex;
  align-items: center;
  height: 20px;
  width: 100%;
  background-color: #ddd;
  border-radius: 5px;
}

.color-bar-value {
  display: inline-block;
  height: 100%;
  background-color: #4caf50;
  border-radius: 5px;
  transition: width 1s;
}

function updateColorBar(value) {
  const colorBarValue = document.querySelector('.color-bar-value');
  const maxWidth = colorBarValue.parentElement.offsetWidth;
  const percentage = Math.min(value / 100, 1);
  colorBarValue.style.width = `${maxWidth * percentage}px`;
}

updateColorBar(50); // 更新数字为50，彩色条将占据50%的宽度