分布式用戶注冊(cè)表單項(xiàng)目說明

【項(xiàng)目描index.html文件，查看項(xiàng)目演示效果?！揪毩?xí)知識(shí)點(diǎn)HTML表單CSSJavaScript【項(xiàng)目分析本項(xiàng)目的重點(diǎn)在于HTML5表單和JavaScript的運(yùn)用練習(xí)。頁面結(jié)構(gòu)圖如下如圖所示，整個(gè)頁面由多個(gè)fileldset一個(gè)ul嵌套在表單中構(gòu)成。具體步驟如下在form中添加ul和三個(gè)fieldset在fieldset中添加h2和h3用于添加標(biāo)題說明文字在fieldset中添加input輸入框和按鈕等【項(xiàng)目實(shí)現(xiàn)<!Doctype<html<metacharset="UTF-<metahttp-patible"<!Doctype<html<metacharset="UTF-<metahttp-patible" 表單UI界面設(shè)計(jì)<linkrel="stylesheet"type="text/css"<!--multistepform--<form<!--progressbar--<ul<liclass="active">賬號(hào)設(shè)置<!--fieldsets--<h2class="fs-title">創(chuàng)建你的賬號(hào)<h3class="fs-subtitle">這是第一步<inputtype="text 地址<inputtype="password" "<inputtype="password" "<inputtype="buttonname="nextclass="nextaction-button"value="下一步"onclick="nextbtn(this,1);"/><h2class="fs-title">填寫社交賬號(hào)<h3class="fs-subtitle">填寫你的常用社交網(wǎng)絡(luò)賬號(hào)<inputtype="text"name="x- "<inputtype="text"name="t- "<inputtype="text ceholder="QQ<inputtype="button"name="previous"action-buttonvalue="上一步<inputtype="buttonname="nextclass="nextaction-button"value="下一步"onclick="nextbtn(this,2);"/><h2class="fs-title">個(gè)人詳細(xì)信息<h3class="fs-subtitle">個(gè)人詳細(xì)信息 的，不會(huì) <inputtype="text ceholder="昵稱<inputtype="text" "<inputtype="text" "<textarea <inputtype="button"name="previous"class="previousction-buttonvalue="上一步onclick="prevbtn(this,2);"/><inputtype="submit"name="submit"action-buttonvalue="提交onclick="return<scriptsrc="js/index.js"CSShtmlbodyfieldset添加進(jìn)度條和中間數(shù)字（連接器）**{margin:0;padding:htmlheight:background:linear-gradient(rgba(196,102,0,0.2),rgba(155,89,182,0.2)),}bodyfont-family:}#msform{width:400px;margin:50pxauto;text-align:center;position:}#msformfieldset{background:white;border:0none;border-radius:3px;box-shadow:0015px1pxrgba(0,0,0,0.4);padding:20px30px;box-sizing:border-box;width:80%;margin:0positionabsolute;}#msformfieldset:not(:first-of-type y:}#msforminput,#msformtextarea{padding:15px;border:1pxsolid#ccc;border-radius:3px;margin-bottom:10px;width:100%;box-sizing:border-font-family:" color:#2C3E50;font-size:}#msform.action-button{width:100px;background:#4e88ff;font-weight:bold;color:white;border:0none;border-radius:1px;cursor:pointer;padding:10px5px;margin:10px5px;}#msform.action-button:hover,#msform.action-button:focus{box-shadow:0002pxwhite,0003px#4e88ff;}.fs-titlefont-size:text-transform:uppercase;color:#2C3E50;margin-bottom:}.fs-subtitlefont-weight:normal;font-size:13px;color:#666;margin-bottom:}#progressbarmargin-bottom:30px;overflow:hidden;/*CSS選擇器計(jì)數(shù)器*/counter-resetstep;}#progressbarlilist-style-type:none;color:white;text-transform:uppercase;font-size:9px;width:33.33%;float:left;position:relative;}#progressbarli:before{content:counter(step);counter-increment:step;width:20px;line-height:20px; y:block;font-size:10px;color:#333;background:white;border-radius:3px;margin:0auto5px}#progressbarli:aftercontent:'';width:100%;height:2px;background:white;position:absolute;left:-50%;top:z-index1*放在數(shù)字的后面}#progressbarli:first-child:aftercontent:none;}#progressbarli.active:before,#progressbarli.active:after{background:#4e88ff;color:}最后添加JSfieldset varcurrent_fs,next_fs, livar functionnextbtn(obj,num){next_fs=getNearEle(current_fs,0); js jsliclass="active";,來控制進(jìn)度條的樣式}functionprevbtn(obj,num){previous_fs=getNearEle(current_fs,1); }@paramele@paramtype類型，上一個(gè)(1)or下一個(gè)@returnDomfunctiongetNearEle(ele,type)type=type==