So realisieren Sie die prozentuale Anzeige in der Javascript-Schrittleiste

Bei der Entwicklung einer Webseite oder Anwendung ist die Schrittleiste ein sehr wichtiges Element. Sie kann Benutzern helfen, den aktuellen Fortschritt und den noch zu erledigenden Arbeitsaufwand klar zu verstehen. Typischerweise sollte eine Schrittleiste die Anzahl der vom Benutzer abgeschlossenen Schritte und die Anzahl der noch abzuschließenden Schritte anzeigen und den aktuellen Fortschrittsprozentsatz genau anzeigen. In diesem Artikel zeigen wir Ihnen, wie Sie mithilfe von JavaScript eine Schrittleiste mit einem Prozentsatz anzeigen.

Schritt 1: HTML-Struktur

Zuerst müssen wir das Grundgerüst einer Schrittleiste in HTML erstellen. Wir können eine einfache ungeordnete Liste (ul) und einige nummerierte Listenelemente (li) wie folgt verwenden:

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

Wir können sehen, dass jedes Listenelement eine Schrittnummer enthält (gegeben durch <span class="step"&gt ;-Element) und einen Titel (dargestellt durch das <span class="title">-Element). Im ersten Listenelement verwenden wir außerdem die Klasse active, um den aktuellen Schritt darzustellen. <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()

Schritt 2: CSS-Stil

Als nächstes müssen wir den Stil für die Schrittleiste in CSS definieren. Wir verwenden Flexbox, um die Listenelemente wie unten gezeigt auszurichten und zu gestalten: 🎜rrreee🎜 In diesem CSS-Stil haben wir Flexbox verwendet, um jedes Listenelement vertikal auszurichten und justify-content: space-between Leave zu verwenden Geben Sie zwischen den einzelnen Listenelementen etwas Platz ein. Wir verwenden auch die Pseudoelemente <code>::before und position: absolute, um die Hintergrundfarbe des aktuellen Schritts und den prozentualen Fortschrittsbalken darzustellen. Beachten Sie, dass wir in jedem Listenelement auch entsprechende Stile für die Schrittnummer und den Titel hinzugefügt haben. 🎜🎜Schritt drei: JavaScript-Code🎜🎜Schließlich müssen wir etwas JavaScript-Code schreiben, um den Fortschrittsprozentsatz zu berechnen und ihn in der Schrittleiste anzuzeigen. Für jedes Listenelement zählen wir die Anzahl der abgeschlossenen Schritte und die Gesamtzahl der Schritte einzeln und zeigen dann den Prozentsatz des Fortschritts im Element neben der Schrittnummer an. Wir können den folgenden Code verwenden, um dies zu erreichen: 🎜rrreee🎜 Beachten Sie, dass wir in diesem Code die Funktion Math.round() verwenden, um den berechneten Fortschrittsprozentsatz auf eine Ganzzahl zu runden und so Probleme bei der Anzeige von Dezimalzahlen zu vermeiden durch Bitfehler. 🎜🎜Schließlich können wir diese obigen Codes in unserer HTML-Datei speichern und die Datei öffnen, um die Wirkung der Schrittleiste und ihren prozentualen Fortschritt zu sehen. Ist es nicht ganz einfach? Mit den oben genannten Schritten können wir ganz einfach eine Schrittleiste mit prozentualem Fortschritt erstellen und den Benutzern ein klares Verständnis ihres aktuellen Fortschritts vermitteln. 🎜

Das obige ist der detaillierte Inhalt vonSo realisieren Sie die prozentuale Anzeige in der Javascript-Schrittleiste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!