html5分步骤填写表单,填写表单分步步骤进度条

填写表单分步步骤进度条

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

效果图如下所示：

步骤进度条

1

验证身份

2

重设登录密码

3

完成

下一步

#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();