1.HTML部分
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>步骤器</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="progress_container">
<div class="progress" id="progress"></div>
<div class="circle active">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>
<button class="btn" id="prev" disabled>上一个</button>
<button class="btn" id="next">下一个</button>
</div>
<script src="style.js"></script>
</body>
</html>
2.CSS部分
/* 变量 */
:root{
--line-border-fill: #3498db;
--line-border-empty: #e0e0e0;
}
*{
box-sizing: border-box;
}
body{
background-color: #f6f7fb;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.container{
/* 文字居中 */
text-align: center;
}
.progress_container{
/* 1234横着显示 */
display: flex;
/* 等距离显示 */
justify-content: space-between;
position: relative;
margin-bottom: 30px;
max-width: 100%;
width: 350px;
}
.progress_container::before{
/* 灰色线条 */
content: '';
background-color: var(--line-border-empty);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 4px;
width: 100%;
z-index: -1;
}
.progress{
/* 蓝色的线 */
background-color: var(--line-border-fill);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 4px;
width: 0%;
z-index: -1;
}
.circle{
/* 圆圈 */
background-color: #fff;
color: #999;
border-radius: 50%;
height: 30px;
width: 30px;
display: flex;
justify-content: center;
align-items: center;
border: 3px solid var(--line-border-empty);
transition: all 0.4s ease;
}
.circle.active{
border-color: var(--line-border-fill);
}
.btn:active{
transform: scale(0.98);
}
.btn:focus{
outline: 0;
}
.btn:disabled{
/* 默认上一个不被选中 */
background-color: var(--line-border-empty);
cursor: not-allowed;
}
3.JS部分
const progress = document.getElementById('progress');
const prev = document.getElementById('prev');
const next = document.getElementById('next');
const cricles = document.querySelectorAll('.circle');
let currentActive = 1;
next.addEventListener('click',()=>{
currentActive++
if(currentActive > cricles.length){
currentActive = cricles.length;
}
updata()
});
prev.addEventListener('click',()=>{
currentActive--
if(currentActive<1){
currentActive=1;
}
updata()
})
function updata(){
cricles.forEach((cricle,idx)=>{
if(idx<currentActive){
cricle.classList.add('active')
}
else{
cricle.classList.remove('active')
}
})
const active = document.querySelectorAll('.active');
progress.style.width = (active.length-1)/(cricles.length-1)*100+'%';
if(currentActive === 1){
prev.disabled = true;
}else if(currentActive === cricles.length){
next.disabled =true;
}
else{
next.disabled =false;
prev.disabled =false;
}
}