在開發網頁或應用程式時，步驟條是一個非常重要的元素，它可以幫助使用者清楚地了解當前進度，以及還有多少工作要完成。通常，一個步驟條應該顯示使用者已經完成的步驟數以及未完成的步驟數，並且需要精確地顯示當前進度百分比。在本文中，我們將介紹如何使用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中文網其他相關文章！
