SOURCE

console 命令行工具 X clear

                    
>
console
var curStep = 2;
function preStep(){
	var contentdom = document.getElementById("step_content");
  var stepdoms = document.getElementsByClassName("step");
	var buttondom = document.getElementById("buttons1").getElementsByTagName("button")[1];
	if(curStep == 1) {
		stepdoms[curStep].setAttribute("class","step step2 noactive")
	} else if(curStep == 2) {
		stepdoms[curStep].setAttribute("class","step step3 noactive")
	} else if(curStep == 3) {
		stepdoms[curStep].setAttribute("class","step step4 noactive")
	} else if(curStep == 4) {
		stepdoms[curStep].setAttribute("class","step step5 noactive")
	}
	if(curStep == 0) {
		return;
	}
	curStep--;
	if(curStep == 0) {
		stepdoms[curStep].setAttribute("class","step step1 active");
		contentdom.innerHTML = "基本信息";
	} else if(curStep == 1) {
		stepdoms[curStep].setAttribute("class","step step2 active");
		contentdom.innerHTML = "附加信息";
	} else if(curStep == 2) {
		stepdoms[curStep].setAttribute("class","step step3 active");
		contentdom.innerHTML = "高级设置";
	} else if(curStep == 3) {
		stepdoms[curStep].setAttribute("class","step step4 active");
		contentdom.innerHTML = "构建成功";
	}
	buttondom.innerHTML = "下一步";
}
function nextStep(){
	var contentdom = document.getElementById("step_content");
  var stepdoms = document.getElementsByClassName("step");
	var buttondom = document.getElementById("buttons1").getElementsByTagName("button")[1];
	if(curStep == 0) {
		stepdoms[curStep].setAttribute("class","step step1 actived")
	} else if(curStep == 1) {
		stepdoms[curStep].setAttribute("class","step step2 actived")
	} else if(curStep == 2) {
		stepdoms[curStep].setAttribute("class","step step3 actived")
	} else if(curStep == 3) {
		stepdoms[curStep].setAttribute("class","step step4 actived")
	}
	if(curStep == 4) {
		return;
	}
	curStep++;
	if(curStep == 1) {
		stepdoms[curStep].setAttribute("class","step step2 active");
		contentdom.innerHTML = "附加信息";
	} else if(curStep == 2) {
		stepdoms[curStep].setAttribute("class","step step3 active");
		contentdom.innerHTML = "高级设置";
	} else if(curStep == 3) {
		stepdoms[curStep].setAttribute("class","step step4 active");
		contentdom.innerHTML = "构建成功";
	} else if(curStep == 4) {
		stepdoms[curStep].setAttribute("class","step step5 active");
		contentdom.innerHTML = "最终结束";
		buttondom.innerHTML = "完成";
	}
}

var curStep2 = 2;
function preStep2(){
	var contentdom = document.getElementById("step_content2");
  var stepdoms = document.getElementsByClassName("stepa");
	var buttondom = document.getElementById("buttons2").getElementsByTagName("button")[1];
	if(curStep2 == 1) {
		stepdoms[curStep2].setAttribute("class","stepa step2 noactive")
	} else if(curStep2 == 2) {
		stepdoms[curStep2].setAttribute("class","stepa step3 noactive")
	} else if(curStep2 == 3) {
		stepdoms[curStep2].setAttribute("class","stepa step4 noactive")
	} else if(curStep2 == 4) {
		stepdoms[curStep2].setAttribute("class","stepa step5 noactive")
	}
	if(curStep2 == 0) {
		return;
	}
	curStep2--;
	if(curStep2 == 0) {
		stepdoms[curStep2].setAttribute("class","stepa step1 active");
		contentdom.innerHTML = "基本信息";
	} else if(curStep2 == 1) {
		stepdoms[curStep2].setAttribute("class","stepa step2 active");
		contentdom.innerHTML = "附加信息";
	} else if(curStep2 == 2) {
		stepdoms[curStep2].setAttribute("class","stepa step3 active");
		contentdom.innerHTML = "高级设置";
	} else if(curStep2 == 3) {
		stepdoms[curStep2].setAttribute("class","stepa step4 active");
		contentdom.innerHTML = "构建成功";
	}
	buttondom.innerHTML = "下一步";
}
function nextStep2(){
	var contentdom = document.getElementById("step_content2");
  var stepdoms = document.getElementsByClassName("stepa");
	var buttondom = document.getElementById("buttons2").getElementsByTagName("button")[1];
	if(curStep2 == 0) {
		stepdoms[curStep2].setAttribute("class","stepa step1 actived")
	} else if(curStep2 == 1) {
		stepdoms[curStep2].setAttribute("class","stepa step2 actived")
	} else if(curStep2 == 2) {
		stepdoms[curStep2].setAttribute("class","stepa step3 actived")
	} else if(curStep2 == 3) {
		stepdoms[curStep2].setAttribute("class","stepa step4 actived")
	}
	if(curStep2 == 4) {
		return;
	}
	curStep2++;
	if(curStep2 == 1) {
		stepdoms[curStep2].setAttribute("class","stepa step2 active");
		contentdom.innerHTML = "附加信息";
	} else if(curStep2 == 2) {
		stepdoms[curStep2].setAttribute("class","stepa step3 active");
		contentdom.innerHTML = "高级设置";
	} else if(curStep2 == 3) {
		stepdoms[curStep2].setAttribute("class","stepa step4 active");
		contentdom.innerHTML = "构建成功";
	} else if(curStep2 == 4) {
		stepdoms[curStep2].setAttribute("class","stepa step5 active");
		contentdom.innerHTML = "最终结束";
		buttondom.innerHTML = "完成";
	}
}
		<p>1. 步骤条一</p>
		<div class="stepss">
			<div class="steps">
				<div class="step step1 actived">基本信息</div>
				<div class="step step2 actived">附加信息</div>
				<div class="step step3 active">高级设置</div>
				<div class="step step4 noactive">构建成功</div>
				<div class="step step5 noactive">最终结束</div>
			</div>
			<div id="step_content" class="step_content">
				高级设置
			</div>
			<div id="buttons1" class="buttons">
				<button onclick="preStep()">上一步</button>
				<button onclick="nextStep()">下一步</button>
			</div>
		</div>
		<p>2. 步骤条二</p>
		<div class="stepss">
			<div class="steps">
				<div class="stepa step1 actived">基本信息</div>
				<div class="stepa step2 actived">附加信息</div>
				<div class="stepa step3 active">高级设置</div>
				<div class="stepa step4 noactive">构建成功</div>
				<div class="stepa step5 noactive">最终结束</div>
			</div>
			<div id="step_content2" class="step_content_2">
				高级设置
			</div>
			<div id="buttons2" class="buttons buttons2">
				<button onclick="preStep2()">上一步</button>
				<button onclick="nextStep2()">下一步</button>
			</div>
		</div>
.stepss{
	width:80%;
	margin:auto;
}
.steps{
	width:100%;
	height:50px;
	margin-top:30px;
}
.step{
	display:inline-block;
	width:20%;
	border:solid 0px;
	border-bottom:solid 3px  #bfbfbf;
	height:100%;
	float:left;
	text-align:center;
	line-height:50px;
	box-sizing:border-box;
	color:#a6a6a6;
}
.step:before{
	display:inline-block;
	height:20px;
	width:20px;
	border:solid 1px #a6a6a6;
	border-radius:50%;
	margin-right:8px;
	line-height:20px;
	background:#a6a6a6;
	color:#fff;
	font-size:14px;
}
.step1:before{
	content:"1";
}
.step2:before{
	content:"2";
}
.step3:before{
	content:"3";
}
.step4:before{
	content:"4";
}
.step5:before{
	content:"5";
}
.step.actived:before{
	content:"✔";
	background:#fff;
	color:#1a75ff;
	border-color:#1a75ff;
}
.step.active:before{
	background:#1a75ff;
	border-color:#1a75ff;
}
.step.active{
	border-bottom:solid #1a75ff 3px;
	color:#000;
}
.step_content{
	border:solid 0px;
	clear:both;
	height:120px;
	padding:10px;
	margin:auto;
	width:100%;
}
.buttons button{
	height:36px;
	width:80px;
	line-height:100%;
	text-align:center;
	border-radius:4px;
	background:#1a75ff;
	border:none;
	color:#fff;
}
.buttons button:first-child{
	background:#fff;
	color:#1a75ff;
	border:solid 1px #999;
}
.buttons button:hover{
	cursor:pointer;
}
.stepa{
	display:inline-block;
	width:20%;
	border:solid 0px;
	height:100%;
	float:left;
	text-align:center;
	line-height:50px;
	box-sizing:border-box;
	position:relative;
	color:#a6a6a6;
}
.stepa:before{
	display:inline-block;
	height:20px;
	width:20px;
	border:solid 2px #a6a6a6;
	border-radius:50%;
	line-height:20px;
	background:#a6a6a6;
	color:#fff;
	font-size:14px;
	position:absolute;
	left:45%;
	bottom:-10px;
}
.stepa:not(:last-child):after{
	content:"";
	display:inline-block;
	height:2px;
	width:100%;
	background:#a6a6a6;
	position:absolute;
	bottom:0%;
	left:50%;
	z-index:-1;
}
.stepa.actived:before{
	content:"✔";
	background:#fff;
	color:#1a75ff;
	border-color:#1a75ff;
}
.stepa.actived:after{
	background:#1a75ff;
}
.stepa.active:before{
	background:#1a75ff;
	border-color:#1a75ff;
}
.stepa.active{
	color:#000;
}
.step_content_2{
	border:solid 0px;
	clear:both;
	height:80px;
	padding:20px;
	margin:auto;
	width:80%;
}
.buttons2{
	margin:10%;
}