Comment réaliser l'affichage du pourcentage dans la barre d'étape javascript

Lors du développement d'une page Web ou d'une application, la barre d'étapes est un élément très important. Elle peut aider les utilisateurs à comprendre clairement la progression en cours et la quantité de travail restant à accomplir. En règle générale, une barre d'étapes doit afficher le nombre d'étapes que l'utilisateur a terminées et le nombre d'étapes restant à terminer, et elle doit afficher avec précision le pourcentage de progression actuel. Dans cet article, nous allons vous montrer comment afficher une barre d'étape avec un pourcentage à l'aide de JavaScript.

Étape 1 : Structure HTML

Tout d'abord, nous devons créer le squelette d'une barre d'étapes en HTML. Nous pouvons utiliser une simple liste non ordonnée (ul) et quelques éléments de liste numérotés (li) comme ceci :

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

Nous pouvons voir que chaque élément de liste contient un numéro d'étape (donné par <span class="step"&gt ;) et un titre (représenté par l'élément <span class="title">). Dans le premier élément de la liste, nous utilisons également la classe active pour représenter l'étape en cours. <span class="step">元素表示）和一个标题（由<span class="title">元素表示）。在第一个列表项中，我们还使用了active类来表示当前步骤。

步骤二：CSS样式

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

.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()

Étape 2 : Style CSS

Ensuite, nous devons définir le style de la barre d'étape en CSS. Nous utiliserons flexbox pour aligner et disposer les éléments de la liste comme indiqué ci-dessous : 🎜rrreee🎜 Dans ce style CSS, nous avons utilisé flexbox pour aligner verticalement chaque élément de la liste et utiliser justify-content: space-between Leave un peu d'espace entre chaque élément de la liste. Nous utilisons également les pseudo-éléments ::before et position: Absolute pour présenter la couleur d'arrière-plan de l'étape actuelle et la barre de progression en pourcentage. Notez que nous avons également ajouté des styles correspondants pour le numéro d'étape et le titre dans chaque élément de la liste. 🎜🎜Troisième étape : Code JavaScript🎜🎜Enfin, nous devons écrire du code JavaScript pour calculer le pourcentage de progression et l'afficher dans la barre d'étape. Pour chaque élément de la liste, nous comptons le nombre d'étapes terminées et le nombre total d'étapes individuellement, puis affichons le pourcentage de progression dans l'élément à côté du numéro d'étape. Nous pouvons utiliser le code suivant pour y parvenir : 🎜rrreee🎜 Notez que nous utilisons la fonction Math.round() dans ce code pour arrondir le pourcentage de progression calculé à un entier, évitant ainsi les décimales. Problèmes d'affichage causés par des erreurs de bits. 🎜🎜Enfin, nous pouvons enregistrer ces codes ci-dessus dans notre fichier HTML et ouvrir le fichier pour voir l'effet de la barre d'étape et son pourcentage de progression. N'est-ce pas très simple ? Avec les étapes ci-dessus, nous pouvons facilement créer une barre d'étapes avec un pourcentage de progression et donner aux utilisateurs une compréhension claire de leur progression actuelle. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!