js 实现进度条
1.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0;list-style:none;} .div{width: 800px;min-height: 400px;margin: 20px auto;border: 1px solid red} .head ul{ overflow: hidden; width: 720px; margin: 0 auto;} .head li{ float: left; min-width: 144px;position: relative;} .head li.active .num{ border-color: #0095ff;color: #00BCD4;} .head li.active:after{ background-color:#0095ff;} .head li:after{content: '';display: block; position: absolute;left: 44px; top: 20px; width: 100px; height: 3px;background-color: #ccc;} .head li:nth-of-type(5):after{content: none; } .head .num{width: 40px; height: 40px;text-align: center;line-height: 40px; border: 3px solid #ccc;border-radius: 50%;color:#333;font-size: 20px;} .head .txt{ width: 100%; font-size: 13px; color: #8BC34A;line-height: 27px;} .content{width: 100%;height: 250px;} .content div{width:100%;height:100%;background-color: #ccd8d8;display: none; } </style> </head> <body> <div class="div"> <div class="head"> <ul> <li class="active"> <div class="num">✔</div> <div class="txt">基本数据</div> </li> <li> <div class="num">2</div> <div class="txt">基本数据</div> </li> <li> <div class="num">3</div> <div class="txt">基本数据</div> </li> <li> <div class="num">4</div> <div class="txt">基本数据</div> </li> <li> <div class="num">5</div> <div class="txt">基本数据</div> </li> </ul> </div> <div class="content"> <div style="display: block"> 111 </div> <div> 222 </div> <div> 333 </div> <div> 444 </div> <div> 555 </div> </div> <div class="'footer"> <input type="button" value="上一步"> <input type="button" value="下一步"> </div> </div> <script> var aInp=document.getElementsByTagName('input'); var oContent=document.getElementsByClassName('content')[0]; var aDiv=oContent.getElementsByTagName('div'); var oHead=document.getElementsByClassName('head')[0]; var aNum=oHead.getElementsByClassName('num'); var aLi=oHead.getElementsByTagName('li'); var iNow=0; var oldLi=aLi[0] var oldDiv=aDiv[0]; var oldNum=aNum[0]; aInp[1].onclick=function(){ next(0) }; aInp[0].onclick=function(){ next(1) }; function next(flag){ if(flag){ if(aInp[1].value=='完成'){ aInp[1].value='下一步' } if(iNow<=0){ return false; } aNum[iNow].innerText=iNow+1+'' iNow--; oldLi.className='' }else{ if(iNow==aLi.length-2){ aInp[1].value='完成' } if(iNow==aLi.length-1){ return false; } iNow++; aNum[iNow].innerText='✔' } oldDiv.style.display='none' aLi[iNow].className='active'; aDiv[iNow].style.display='block'; oldLi=aLi[iNow]; oldDiv=aDiv[iNow]; oldNum=aNum[iNow] } </script> </body> </html>
2.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0;list-style:none;} .div{width: 800px;min-height: 400px;margin: 20px auto;border: 1px solid red} .head ul{ overflow: hidden; width: 720px; margin: 0 auto;} .head li{ float: left; min-width: 144px;position: relative;} .head li.active .num{ border-color: #0095ff;color: #00BCD4;} .head li.active:after{ background-color:#0095ff;} .head li:after{content: '';display: block; position: absolute;left: 44px; top: 20px; width: 100px; height: 3px;background-color: #ccc;} .head li:nth-of-type(5):after{content: none; } .head .num{width: 40px; height: 40px;text-align: center;line-height: 40px; border: 3px solid #ccc;border-radius: 50%;color:#333;font-size: 20px;} .head .txt{ width: 100%; font-size: 13px; color: #8BC34A;line-height: 27px;} .content{width: 100%;height: 250px;} .content div{width:100%;height:100%;background-color: #ccd8d8;display: none; } </style> </head> <body> <div class="div"> <div class="head"> <ul> <li class="active"> <div class="num">✔</div> <div class="txt">基本数据</div> </li> <li> <div class="num">2</div> <div class="txt">基本数据</div> </li> <li> <div class="num">3</div> <div class="txt">基本数据</div> </li> <li> <div class="num">4</div> <div class="txt">基本数据</div> </li> <li> <div class="num">5</div> <div class="txt">基本数据</div> </li> </ul> </div> <div class="content"> <div style="display: block"> 111 </div> <div> 222 </div> <div> 333 </div> <div> 444 </div> <div> 555 </div> </div> <div class="'footer"> <input type="button" value="上一步"> <input type="button" value="下一步"> </div> </div> <script> /* var aInp=document.getElementsByTagName('input'); var oContent=document.getElementsByClassName('content')[0]; var aDiv=oContent.getElementsByTagName('div'); var oHead=document.getElementsByClassName('head')[0]; var aNum=oHead.getElementsByClassName('num'); var aLi=oHead.getElementsByTagName('li'); var iNow=0; var oldLi=aLi[0] var oldDiv=aDiv[0]; var oldNum=aNum[0]; aInp[1].onclick=function(){ next(0) }; aInp[0].onclick=function(){ next(1) }; function next(flag){ if(flag){ if(aInp[1].value=='完成'){ aInp[1].value='下一步' } if(iNow<=0){ return false; } aNum[iNow].innerText=iNow+1+'' iNow--; oldLi.className='' }else{ if(iNow==aLi.length-2){ aInp[1].value='完成' } if(iNow==aLi.length-1){ return false; } iNow++; aNum[iNow].innerText='✔' } oldDiv.style.display='none' aLi[iNow].className='active'; aDiv[iNow].style.display='block'; oldLi=aLi[iNow]; oldDiv=aDiv[iNow]; oldNum=aNum[iNow] }*/ function $$(elem,select){ //$$('.div') if(arguments.length==1){ select=elem; elem=document; } if(select.charAt(0)=='.'){ return elem.getElementsByClassName(select.substring(1)) }else{ return elem.getElementsByTagName(select) } } var aInp=$$('input'); var oContent=$$('.content')[0]; var aDiv=$$(oContent,'div'); var oHead=$$('.head')[0]; var aNum=$$(oHead,'.num'); var aLi=$$(oHead,'li'); var iNow=0; aInp[1].onclick=function(){ change(1) } aInp[0].onclick=function(){ change(0) } function change(flag){ if(flag){ if(iNow<aLi.length-1) { iNow++; aLi[iNow].className='active' aNum[iNow].innerText='✔' if(iNow==aLi.length-1){ aInp[1].value='完成' }; } }else{ if(iNow==0) return false; iNow--; aLi[iNow+1].className='' aNum[iNow+1].innerText=iNow+2 if(iNow>=0){ aInp[1].value='下一步' }; } for(var k=0;k<aLi.length;k++){ aDiv[k].style.display='none' } aDiv[iNow].style.display='block' } </script> </body> </html>
浙公网安备 33010602011771号