JavaScriptステップバーでパーセント表示を実現する方法

<ul class="progress">
  <li class="active">
    <span class="step">1</span>
    <span class="title">步骤一</span>
  </li>
  <li>
    <span class="step">2</span>
    <span class="title">步骤二</span>
  </li>
  <li>
    <span class="step">3</span>
    <span class="title">步骤三</span>
  </li>
  <li>
    <span class="step">4</span>
    <span class="title">步骤四</span>
  </li>
</ul>

.progress {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}

.progress li {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 1;
}

.progress li.active::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -50%;
  width: 200%;
  height: 4px;
  background-color: #4caf50;
  transform: translateY(-50%);
  z-index: -1;
}

.progress .step {
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background-color: #f2f2f2;
  color: #999;
  margin-bottom: 10px;
}

.progress li.active .step {
  background-color: #4caf50;
  color: #fff;
}

.progress .title {
  display: block;
  font-size: 12px;
  color: #777;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.progress li:first-child .title {
  text-align: left;
}

.progress li:last-child .title {
  text-align: right;
}

// 获取步骤条的UL元素
const progress = document.querySelector('.progress');

// 获取步骤条中的所有列表项
const steps = progress.querySelectorAll('li');

// 遍历每个列表项
steps.forEach((step, index) => {
  // 获取当前列表项的步骤号
  const stepNumber = step.querySelector('.step');

  // 计算已完成的步骤数和总步骤数
  const completed = index;
  const total = steps.length - 1;

  // 计算进度的百分比
  const percent = Math.round((completed / total) * 100);

  // 在步骤号旁边的元素中显示百分比
  stepNumber.innerHTML = `${percent}%`;
});