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 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()函數來將計算出的進度百分比四捨五入到整數，從而避免小數位誤差所導致的顯示問題。

最後，我們可以將上述這些程式碼儲存到我們的HTML檔案中，並開啟該檔案以查看步驟條及其百分比進度的效果。是不是很簡單？透過上述這些步驟，我們就可以輕鬆地建立一個帶有百分比進度的步驟條，並使使​​用者清晰地了解他們當前的進度。

以上是javascript步驟條顯示百分比怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！