本文實例講述了JS模擬并美化的表單控件效果實例。分享給大家供大家參考。具體如下：
這里演示使用JS美化并模擬網頁表單控件，十分漂亮的表單效果，使用時可以將代碼內的JS保存為文件, 方便調用，使用方法：WellForm(element) //element 為表單元素。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-like-table-control-style-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>模擬表單控件</title><style type="text/css"> /* ----表單控件CSS開始---- ↓ */.WellForm *{margin:0;padding:0;}.WellForm{font-size:12px;font-family:arial;line-height:21px;}.WellForm pre{float:left;margin-right:10px;}/*background*/.WellForm .TextL,.WellForm .TextR,.WellForm .WellText,.WellForm .SelectL,.WellForm .SelectR,.WellForm .WellSelect,.WellForm .WellTextArea .T,.WellForm .WellTextArea .T .TL,.WellForm .WellTextArea .T .TM,.WellForm .WellTextArea .B,.WellForm .WellTextArea .B .BL,.WellForm .WellTextArea .B .BM,.WellForm .WellRadio,.WellForm .WellCheckBox,.WellForm .ButtonL,.WellForm .ButtonR,.WellForm .WellButton{background:url(images/WellForm.gif) no-repeat;}/*WellText*/.WellForm .TextL,.WellForm .TextR,.WellForm .WellText{float:left;width:5px;height:21px;}.WellForm .TextL{background-position:0 0;}.WellForm .TextR{background-position:right 0;}.WellForm .TextLH{background-position:0 -21px;}.WellForm .TextRH{background-position:right -21px;}.WellForm .WellText{border:0;width:auto;height:17px;padding:2px 0;padding:3px 0 1px/9;*padding:3px 0 1px;font-family:arial;background-repeat:repeat-x;background-position:0 -42px;}.WellForm .WellTextH{background-position:0 -63px;}/*WellSelect*/.WellForm .SelectL,.WellForm .SelectR,.WellForm .WellSelect{float:left;height:21px;}.WellForm .SelectL{width:3px;background-position:0 -84px;}.WellForm .SelectR{width:16px;cursor:pointer;background-position:right -84px;margin-right:5px;}.WellForm .WellSelect{position:relative;cursor:pointer;background-repeat:repeat-x;background-position:0 -105px;}.WellForm .WellSelect select{display:none;}.WellForm .WellSelect em{position:absolute;top:0;left:3px;color:#fff;height:21px;display:block;line-height:21px;font-style:normal;}.WellForm .WellSelect ul{list-style-type:none;position:absolute;top:18px;left:0;z-index:1000;display:none;background:#6C6D70;}.WellForm .WellSelect ul li {color:#fff;height:20px;cursor:pointer;line-height:20px;padding-left:3px;}.WellForm .WellSelect ul li.hover{background:#333;}/*WellTextArea*/.WellForm .WellTextArea{float:left;}.WellForm .WellTextArea .T,.WellForm .WellTextArea .T .TL,.WellForm .WellTextArea .T .TM,.WellForm .WellTextArea .B,.WellForm .WellTextArea .B .BL,.WellForm .WellTextArea .B .BM{height:5px;overflow:hidden;}.WellForm .WellTextArea .T{float:left;width:100%;background-position:right -126px;}.WellForm .WellTextArea .TH{float:left;width:100%;background-position:right -131px;}.WellForm .WellTextArea .T .TL{background-position:0 -126px;}.WellForm .WellTextArea .TH .TL{background-position:0 -131px;}.WellForm .WellTextArea .T .TM{margin:0 5px;background-repeat:repeat-x;background-position:0 -136px;}.WellForm .WellTextArea .TH .TM{margin:0 5px;background-repeat:repeat-x;background-position:0 -141px;}.WellForm .WellTextArea .B{float:left;width:100%;background-position:right -146px;}.WellForm .WellTextArea .BH{float:left;width:100%;background-position:right -151px;}.WellForm .WellTextArea .B .BL{background-position:0 -146px;}.WellForm .WellTextArea .BH .BL{background-position:0 -151px;}.WellForm .WellTextArea .B .BM{margin:0 5px;background-repeat:repeat-x;background-position:0 -156px;}.WellForm .WellTextArea .BH .BM{margin:0 5px;background-repeat:repeat-x;background-position:0 -161px;}.WellForm .WellTextArea .M,.WellForm .WellTextArea .M .MR{float:left;background:url(images/TextArea-1.gif) repeat-y;}.WellForm .WellTextArea .M{background-position:0 0;}.WellForm .WellTextArea .M .MR{background-position:right 0;}.WellForm .WellTextArea .MH,.WellForm .WellTextArea .MH .MR{float:left;background:url(images/TextArea-2.gif) repeat-y;}.WellForm .WellTextArea .MH{background-position:0 0;}.WellForm .WellTextArea .MH .MR{background-position:right 0;}.WellForm .WellTextArea textarea{float:left;border:0;margin:0 5px;overflow:auto;background:url(images/TextArea.gif);font-family:arial;font-size:12px;resize:none;}/*WellRadio*/.WellForm .WellRadio{float:left;width:13px;height:13px;cursor:pointer;overflow:hidden;margin:4px 5px 0 0;background-position:-15px -270px;}.WellForm .WellRadioH{background-position:-15px -284px;}.WellForm .WellRadio input{margin-top:13px;display:none;}/*WellCheckBox*/.WellForm .WellCheckBox{float:left; width:12px;height:12px;cursor:pointer;overflow:hidden;margin:4px 5px 0 0;background-position:0 -270px;}.WellForm .WellCheckBoxH{background-position:0 -283px;}.WellForm .WellCheckBox input{margin-top:12px;display:none;}/*WellButton*/.WellForm .ButtonL,.WellForm .ButtonR,.WellForm .WellButton{cursor:pointer;float:left;width:5px;height:26px;}.WellForm .ButtonL{background-position:0 -166px;}.WellForm .ButtonR{background-position:right -166px;margin-right:10px;}.WellForm .ButtonLH{background-position:0 -192px;}.WellForm .ButtonRH{background-position:right -192px;}.WellForm .WellButton{border:0;width:auto;font-size:12px;color:#fff!important;height:26px;padding:0 10px 3px;*padding-bottom:0;padding-bottom:0/9;font-family:arial;background-repeat:repeat-x;background-position:0 -218px;}.WellForm .WellButtonH{background-position:0 -244px;}/* ----表單控件CSS結束---- ↑ */form{float:left;padding:20px;border:2px dashed #ccc;margin:20px 0 0 40px;width:380px;}form .item{float:left;clear:both;width:100%;margin-bottom:10px;}.WellForm label{float:left;width:4em;height:21px;text-align:right;}</style><script type="text/javascript"> window.onload = function (){ var aForm = document.getElementsByTagName("form"); //多個表單 for (var i = 0; i < aForm.length; i++) WellForm(aForm[i]);};/*------------------------------------------------- + 可以將以下JS保存為文件, 方便調用 使用方法：WellForm(element) //element 為表單元素 +------------------------------------------------- */// 獲取classfunction getClass(sClass, oParent){ var aClass = []; var reClass = new RegExp("(^| )" + sClass + "( |$)"); var aElem = (oParent || document).getElementsByTagName("*"); for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]); return aClass}// class是否存在function hasClass(obj, sClass){ var reg = new RegExp("(^|//s)" + sClass + "(//s|$)"); return reg.test(obj.className)}// 添加classfunction addClass(obj, sClass){ hasClass(obj, sClass) || (obj.className += " "+sClass)}// 刪除classfunction removeClass(obj, sClass){ if (hasClass(obj, sClass)) { var reg = new RegExp("(^|//s)" + sClass + "(//s|$)"); obj.className = obj.className.replace(reg, ""); }}// 上一個元素function prevElement(obj){ return obj.previousSibling || obj.previousElementSibling || null }// 下一個元素function nextElement(obj){ return obj.nextSibling || obj.nextElementSibling || null }// 自定義表單函數function WellForm(form){ var i = 0; var zIndex = 1; var aInput = form.getElementsByTagName("input"); var aSelect = form.getElementsByTagName("select"); var aTextArea = form.getElementsByTagName("textarea"); form.className = "WellForm"; /* 單行文本框 */ var aText = []; for (i = 0; i < aInput.length; i++) (aInput[i]["type"] == "text" || aInput[i]["type"] == "password") && aText.push(aInput[i]); for (i = 0; i < aText.length; i++) { var oTextL = document.createElement("div"); var oTextR = document.createElement("div"); oTextL.className = "TextL"; oTextR.className = "TextR"; aText[i].className = "WellText"; aText[i].parentNode.insertBefore(oTextL, aText[i]); aText[i].parentNode.insertBefore(oTextR, nextElement(aText[i])); //獲取焦點 aText[i].onfocus = function () { addClass(this, "WellTextH"); addClass(prevElement(this), "TextLH"); addClass(nextElement(this), "TextRH") }; //失去焦點 aText[i].onblur = function () { removeClass(this, "WellTextH"); removeClass(prevElement(this), "TextLH"); removeClass(nextElement(this), "TextRH") } } /* 多行文本框 */ for (i = 0; i < aTextArea.length; i++) { var oTextArea = document.createElement("div"); oTextArea.className = "WellTextArea"; //上邊框 var oT = document.createElement("div"); var oTL = document.createElement("div"); var oTM = document.createElement("div"); oT.className = "T"; oTL.className = "TL"; oTM.className = "TM"; oTL.appendChild(oTM); oT.appendChild(oTL); //中間邊框 var oM = document.createElement("div"); var oMR = document.createElement("div"); oM.className = "M"; oMR.className = "MR"; oM.appendChild(oMR); //下邊框 var oB = document.createElement("div"); var oBL = document.createElement("div"); var oBM = document.createElement("div"); oB.className = "B"; oBL.className = "BL"; oBM.className = "BM"; oBL.appendChild(oBM); oB.appendChild(oBL); //插入結構 aTextArea[i].parentNode.insertBefore(oTextArea, aTextArea[i]); oMR.appendChild(aTextArea[i]); oTextArea.appendChild(oT); oTextArea.appendChild(oM); oTextArea.appendChild(oB); oTextArea.style.width = oMR.offsetWidth + "px"; //獲取焦點 aTextArea[i].onfocus = function () { var M = this.parentNode.parentNode; addClass(M, "MH"); addClass(prevElement(M), "TH"); addClass(nextElement(M), "BH") }; aTextArea[i].onblur = function () { var M = this.parentNode.parentNode; removeClass(M, "MH"); removeClass(prevElement(M), "TH"); removeClass(nextElement(M), "BH") } } /* 單選框 */ var aRadio = []; for (i = 0; i < aInput.length; i++) aInput[i]["type"] == "radio" && aRadio.push(aInput[i]); for (i = 0; i < aRadio.length; i++) { var oRadio = document.createElement("div"); oRadio.className = "WellRadio"; aRadio[i].parentNode.insertBefore(oRadio, aRadio[i]); oRadio.appendChild(aRadio[i]); aRadio[i].checked && addClass(aRadio[i].parentNode, "WellRadioH"); oRadio.onclick = function () { var siblings = getClass("WellRadio", this.parentNode); for (i = 0; i < siblings.length; i++) { removeClass(siblings[i], "WellRadioH"); siblings[i].children[0].checked = false; } addClass(this, "WellRadioH"); this.children[0].checked = true } } /* 復選框 */ var aCheckBox = []; for (i = 0; i < aInput.length; i++) aInput[i]["type"] == "checkbox" && aCheckBox.push(aInput[i]); for (i = 0; i < aCheckBox.length; i++) { var oCheckBox = document.createElement("div"); oCheckBox.className = "WellCheckBox"; aCheckBox[i].parentNode.insertBefore(oCheckBox, aCheckBox[i]); oCheckBox.appendChild(aCheckBox[i]); aCheckBox[i].checked && addClass(aCheckBox[i].parentNode, "WellCheckBoxH"); oCheckBox.onclick = function () { this.children[0].checked = !this.children[0].checked; this.children[0].checked ? addClass(this, "WellCheckBoxH") : removeClass(this, "WellCheckBoxH") } } /* 按鈕 */ var aButton = []; for (i = 0; i < aInput.length; i++) (aInput[i]["type"] == "button" || aInput[i]["type"] == "submit") && aButton.push(aInput[i]); for (i = 0; i < aButton.length; i++) { var oBtnL = document.createElement("div"); var oBtnR = document.createElement("div"); oBtnL.className = "ButtonL"; oBtnR.className = "ButtonR"; aButton[i].className = "WellButton"; aButton[i].parentNode.insertBefore(oBtnL, aButton[i]); aButton[i].parentNode.insertBefore(oBtnR, nextElement(aButton[i])); //鼠標移入 aButton[i].onmouseover = function () { addClass(this, "WellButtonH"); addClass(prevElement(this), "ButtonLH"); addClass(nextElement(this), "ButtonRH"); }; //鼠標移出 aButton[i].onmouseout = function () { removeClass(this, "WellButtonH"); removeClass(prevElement(this), "ButtonLH"); removeClass(nextElement(this), "ButtonRH"); } } /* 下拉菜單 */ for (i = 0; i < aSelect.length; i++) { var oFragment = document.createDocumentFragment(); var oSelectL = document.createElement("div"); var oSelectR = document.createElement("div"); var oWellSelect = document.createElement("div"); var oEm = document.createElement("em"); var oUl = document.createElement("ul"); oSelectL.className = "SelectL"; oSelectR.className = "SelectR"; oWellSelect.className = "WellSelect"; //插入結構 aSelect[i].parentNode.insertBefore(oSelectL, aSelect[i]); aSelect[i].parentNode.insertBefore(oSelectR, nextElement(aSelect[i])); oUl.style.width = oWellSelect.style.width = aSelect[i].offsetWidth - oSelectR.offsetWidth / 2 + "px"; for (var j = 0; j < aSelect[i].options.length; j++) { var oLi = document.createElement("li"); oLi.innerHTML = aSelect[i].options[j].text; oLi["sValue"] = aSelect[i].options[j].value; oFragment.appendChild(oLi); aSelect[i].options[j].selected && (oEm.innerHTML = aSelect[i].options[j].text) } oUl.appendChild(oFragment); oWellSelect.appendChild(oEm); oWellSelect.appendChild(oUl); aSelect[i].parentNode.insertBefore(oWellSelect, aSelect[i]); oWellSelect.appendChild(aSelect[i]); oWellSelect.onclick = oSelectR.onclick = function (event) { var o = this.getElementsByTagName("ul")[0] || prevElement(this).getElementsByTagName("ul")[0]; var aUl = form.getElementsByTagName("ul"); this.parentNode.style.position = "relative"; this.parentNode.style.zIndex = zIndex++; o.style.display = o.style.display == "block" ? "none" : "block"; for (i = 0; i < aUl.length; i++) { if (o == aUl[i]) continue; aUl[i].style.display = "none"; } var aLi = o.getElementsByTagName("li"); for (i = 0; i < aLi.length; i++) { aLi[i].onmouseover = function () { this.className = "hover" }; aLi[i].onmouseout = function () { this.className = "" }; aLi[i].onclick = function () { prevElement(this.parentNode).innerHTML = this.innerHTML; nextElement(this.parentNode).value = this.sValue } } (event || window.event).cancelBubble = true; document.onclick = function () { o.style.display = "none" } } }}</script></head><body><form> <div class="item"><label>姓名：</label><input type="text" name="name" /></div> <div class="item"><label>電話：</label><input type="text" name="tel" /></div> <div class="item"> <label>性別：</label> <select name="sex"> <option value="男孩">男孩</option> <option value="女孩" selected="selected">女孩</option> <option value="人妖">人妖</option> </select> </div> <div class="item"> <label>生日：</label> <select name="month"> <option value="1">1月</option> <option value="2">2月</option> <option value="3">3月</option> <option value="4">4月</option> <option value="5">5月</option> <option value="6">6月</option> <option value="7" selected="selected">7月</option> <option value="8">8月</option> <option value="9">9月</option> <option value="10">10月</option> </select> <select name="day"> <option value="1">1號</option> <option value="2">2號</option> <option value="3">3號</option> <option value="4">4號</option> <option value="5">5號</option> <option value="6" selected="selected">6號</option> <option value="7">7號</option> <option value="8">8號</option> <option value="9">9號</option> <option value="10">10號</option> <option value="11">11號</option> <option value="12">12號</option> <option value="13">13號</option> <option value="14">14號</option> <option value="15">15號</option> <option value="16">16號</option> </select> <select name="year"> <option value="2000">2000年</option> <option value="2001">2001年</option> <option value="2002">2002年</option> <option value="2003">2003年</option> <option value="2004">2004年</option> <option value="2005">2005年</option> <option value="2006">2006年</option> <option value="2007">2007年</option> <option value="2008">2008年</option> <option value="2009">2009年</option> <option value="2010" selected="selected">2010年</option> <option value="2011">2011年</option> <option value="2012">2012年</option> <option value="2013">2013年</option> </select> </div> <div class="item"> <label>婚姻：</label> <input type="radio" name="marry" value="已婚" /><pre>已婚</pre> <input type="radio" name="marry" value="未婚" checked="checked" /><pre>未婚</pre> </div> <div class="item"> <label>愛好：</label> <input type="checkbox" name="like" value="吃飯" /><pre>吃飯</pre> <input type="checkbox" name="like" value="睡覺" /><pre>睡覺</pre> <input type="checkbox" name="like" value="上網" checked="checked" /><pre>上網</pre> <input type="checkbox" name="like" value="打游戲" checked="checked" /><pre>打游戲</pre> </div> <div class="item"><label>地址：</label><input type="text" style="width:300px;" name="address" /></div> <div class="item"><label>備注：</label><textarea cols="50" rows="5" style="width:300px;" name="remark"></textarea></div> <div class="item"><label>說明：</label><textarea cols="50" rows="5" style="width:300px;" name="desc"></textarea></div> <div class="item"><label></label><input type="submit" value="提交" /></div></form><form> <div class="item"><label>用戶名：</label><input type="text" name="username" /></div> <div class="item"><label>密碼：</label><input type="password" name="pwd" /></div> <div class="item"><label>驗證碼：</label><input type="text" name="code" style="width:60px;" /></div> <div class="item"><label></label><input type="submit" value="提交" /></div></form></body></html>希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
