HTML 结构
我们需要在 HTML 中定义步骤进度条的结构。我们可以使用无序列表来实现。每个列表项都代表一个步骤,并包含一个标题和描述。我们还将添加两个按钮,以便用户可以在步骤之间切换。
<ul class="progress-bar">
<li class="active">
<div class="step">1</div>
<div class="title">Step One</div>
<div class="description">Some description goes here.</div>
</li>
<li>
<div class="step">2</div>
<div class="title">Step Two</div>
<div class="description">Some description goes here.</div>
</li>
<li>
<div class="step">3</div>
<div class="title">Step Three</div>
<div class="description">Some description goes here.</div>
</li>
<li>
<div class="step">4</div>
<div class="title">Step Four</div>
<div class="description">Some description goes here.</div>
</li>
</ul>
<div class="buttons">
<button class="prev">Previous</button>
<button class="next">Next</button>
</div>
CSS 样式
我们将添加 CSS 样式以美化进度条。我们将为每个步骤添加一个圆形,以表示当前步骤的进度。
ul.progress-bar {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
}
ul.progress-bar li {
position: relative;
flex-basis: calc(100% / 4);
text-align: center;
}
ul.progress-bar li:before {
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ccc;
display: block;
margin: auto;
}
ul.progress-bar li.active:before,
ul.progress-bar li.complete:before {
background-color: #007aff;
}
ul.progress-bar li.active:after,
ul.progress-bar li.complete:after {
content: "";
position: absolute;
top: 10px;
left: -50%;
right: -50%;
bottom: 10px;
border: 2px solid #007aff;
}
ul.progress-bar li.active + li:before,
ul.progress-bar li.complete + li:before {
background-color: #007aff;
}
ul.progress-bar li.active + li:after,
ul.progress-bar li.complete + li:after {
border-color: #ccc;
}
ul.progress-bar li .step {
color: #fff;
font-weight: bold;
font-size: 16px;
line-height: 20px;
margin-top: 5px;
margin-bottom: 10px;
}
ul.progress-bar li .title {
font-size: 14px;
line-height: 18px;
font-weight: bold;
margin-bottom: 5px;
}
ul.progress-bar li .description {
font-size: 12px;
line-height: 16px;
}
.buttons {
display: flex;
justify-content: space-between;
align-items: center;
}
.buttons button {
background-color: #007aff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 14px;
line-height: 18px;
cursor: pointer;
}
.buttons button:hover {
background-color: #0053ba;
}
JavaScript 代码
我们将添加 JavaScript 代码以使进度条具有交互性。我们将为“下一步”按钮和“上一步”按钮添加事件侦听器,并根据当前活动步骤来更新进度条的状态。
const progressBar = document.querySelector(".progress-bar");
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");
const steps = [...progressBar.querySelectorAll("li")];
let currentStep = 0;
function updateProgressBar() {
steps.forEach((step, index) => {
if(step.classList.contains("active"))) {
progressBar.style.setProperty("--current-step", index + 1);
}
if (index <= currentStep) {
step.classList.add("complete");
} else {
step.classList.remove("complete");
}
});
}
updateProgressBar();
nextBtn.addEventListener("click", () => {
if (currentStep < steps.length - 1) {
steps[currentStep].classList.remove("active");
currentStep++;
steps[currentStep].classList.add("active");
updateProgressBar();
}
});
prevBtn.addEventListener("click", () => {
if (currentStep > 0) {
steps[currentStep].classList.remove("active");
currentStep--;
steps[currentStep].classList.add("active");
updateProgressBar();
}
});
以上就是制作蓝色圆点步骤进度条的完整步骤。我们在 HTML 中定义了进度条的结构,使用 CSS 样式为其添加外观和交互性,并使用 JavaScript 代码使其具有动态更新的能力。
这个进度条可以用于许多应用场景,例如注册流程、付款流程等等。希望本文对你有所帮助!