使用javaScript生成一个步骤条
时间: 2024-04-29 19:26:34 浏览: 55
好的,让我来帮您生成一个简单的步骤条。首先,您可以通过HTML和CSS创建一个基本的步骤条框架,然后使用JavaScript来进一步实现功能。
HTML代码:
```
<div class="steps">
<div class="step active">
<span class="step-number">1</span>
<span class="step-title">Step 1</span>
</div>
<div class="step">
<span class="step-number">2</span>
<span class="step-title">Step 2</span>
</div>
<div class="step">
<span class="step-number">3</span>
<span class="step-title">Step 3</span>
</div>
<div class="step">
<span class="step-number">4</span>
<span class="step-title">Step 4</span>
</div>
</div>
```
CSS代码:
```
.steps {
display: flex;
justify-content: space-between;
}
.step {
position: relative;
display: flex;
align-items: center;
}
.step.active .step-number {
background: #007bff;
color: #fff;
}
.step.active .step-title {
font-weight: bold;
}
.step-number {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: #fff;
border: 2px solid #007bff;
color: #007bff;
font-size: 18px;
}
.step-title {
margin-left: 10px;
}
```
接下来是JavaScript代码:
```
const steps = document.querySelectorAll('.step');
const currentStep = localStorage.getItem('currentStep') || 1;
for(let i = 0; i < currentStep - 1; i++) {
steps[i].classList.add('past');
}
steps[currentStep - 1].classList.add('active');
for(let i = currentStep; i < steps.length; i++) {
steps[i].classList.add('future');
}
steps.forEach((step, index) => {
step.addEventListener('click', () => {
if(index < currentStep - 1 || index == currentStep - 1) {
return;
} else {
localStorage.setItem('currentStep', index + 1);
location.reload();
}
});
});
```
以上代码将当前步骤存储在本地存储中,并在单击下一个步骤时更新当前步骤。此外,它还将添加不同的类来突出显示当前、过去和未来的步骤。