填写表单分步步骤进度条

填写表单分步步骤进度条

使用原生JS实现填写表单分步步骤进度条

效果图如下所示：

步骤进度条

<div id="step">
    <div class="step-wrap">
        <div class="step-bg"></div>
        <div class="step-progress"></div>
        <ul class="step">
            <li class="step-item active">
                <div class="setp-item-num"><span>1</span></div>
                <div class="setp-item-title">验证身份</div>
            </li>
            <li class="step-item">
                <div class="setp-item-num"><span>2</span></div>
                <div class="setp-item-title">重设登录密码</div>
            </li>
            <li class="step-item">
                <div class="setp-item-num"><span>3</span></div>
                <div class="setp-item-title">完成</div>
            </li>
        </ul>
    </div>
</div>

<div class="step-next">
    <button id="nextStep">下一步</button>
</div>

#step .step-wrap {
    width: 100%;
    position: relative;
}
#step .step-bg {
    width: 100%;
    height: 10px;
    border-radius: 5px;
    position: absolute;
    top: 10px;
    left: 0;
    background-color: lightgrey;
}
#step .step-progress {
    width: 33.33%;
    height: 10px;
    border-radius: 5px;
    position: absolute;
    top: 10px;
    left: 0;
    background-color: aqua;
}
#step .step {
    display: inline-block;
}
#step .step-item {
    width: 33.33%;
    margin-bottom: 10px;
    display: inline-block;
    position: absolute;
    top: 0;
}
#step .step-item .setp-item-title {
    font-size: 14px;
    text-align: center;
}
#step .step-item.active .setp-item-num {
    background-color: aqua;
}
#step .step .step-item .setp-item-num {
    line-height: 30px;
    margin-left: 44%;
}
#step .step .step-item:nth-child(1) {
    left: 0;
} 
#step .step .step-item:nth-child(2) {
    left: 33.33%;
}
#step .step .step-item:nth-child(3) {
    left: 66.66%;
}
#step .step .setp-item-num {
    width: 30px;
    height: 30px;
    background-color: lightgrey;
    border-radius: 50%;
    text-align: center;
    padding: 3px;
}
.step-next {
	width: 200px;
	margin: 40px auto;
}
#nextStep {
	display: block;
	height: 30px;
	width: 100%;
}

var progress = (function () {
	var step = document.getElementById('step');
    var step_progress = step.getElementsByClassName('step-progress')[0];
    var step_item = step.getElementsByClassName('step-item');
    var nextStep = document.getElementById('nextStep');
    
    var count = 1;	// 计数器
    
    var Event = function () {
        nextStep.onclick = function () {
        	if (count++&&count<4) {
        		if (count === 2) {
        			step_progress.style.width = '66.66%';
        			step_item[1].className = 'step-item active';
        		}
        		if (count === 3) {
        			step_progress.style.width = '100%';
        			step_item[2].className = 'step-item active';
        		}
        	}
        }
    }
    return Event;
})();

// 函数调用
progress();