javascript步骤条显示百分比怎么实现

在开发网页或应用程序时，步骤条是一个非常重要的元素，它可以帮助用户清晰地了解当前进度，以及还有多少工作要完成。通常，一个步骤条应该显示用户已经完成的步骤数以及未完成的步骤数，并且需要精确地显示当前进度百分比。在本文中，我们将介绍如何使用javascript显示一个带有百分比的步骤条。

步骤一：HTML结构

首先，我们需要在HTML中创建一个步骤条的骨架。我们可以使用一个简单的无序列表（ul）和一些带有序号的列表项（li），如下所示：

<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>

我们可以看到，每个列表项都包含一个步骤号（由<span class="step"></span>元素表示）和一个标题（由<span class="title"></span>元素表示）。在第一个列表项中，我们还使用了active类来表示当前步骤。

步骤二：CSS样式

立即学习“Java免费学习笔记（深入）”；

接下来，我们需要在CSS中为步骤条定义样式。我们将使用flexbox来对齐和布局列表项，如下所示：

飞象老师

猿辅导推出的AI教学辅助工具

下载

.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;
}

在这个CSS样式中，我们使用了flexbox来将每个列表项垂直对齐，并使用justify-content: space-between使每个列表项之间留有一些空间。我们还使用伪元素::before和position: absolute将当前步骤背景颜色和百分比进度条呈现出来。注意，我们还为每个列表项中的步骤号和标题添加了相应的样式。

步骤三：JavaScript代码

最后，我们需要编写一些JavaScript代码来计算进度百分比，并在步骤条中显示它。对于每个列表项，我们分别计算已完成的步骤数和总步骤数，然后将进度的百分比显示在步骤号旁边的元素中。我们可以使用以下代码来实现这一点：

// 获取步骤条的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}%`;
});

注意，我们在这段代码中使用了Math.round()函数来将计算出的进度百分比四舍五入到整数，从而避免小数位误差导致的显示问题。

最后，我们可以将以上这些代码保存到我们的HTML文件中，并打开该文件以查看步骤条及其百分比进度的效果。是不是很简单？通过以上这些步骤，我们就可以轻松地创建一个带有百分比进度的步骤条，并使用户清晰地了解他们当前的进度。