本節(jié)講述單選框/下拉菜單/添加文件，綜合css，html和JavaScript實(shí)現(xiàn)的，具體詳情如下所示：
單選框：
實(shí)現(xiàn)的功能是：（類(lèi)似平時(shí)的性格測(cè)試）
先隱藏一部分頁(yè)面，然后通過(guò)點(diǎn)擊單選框來(lái)顯示。
再通過(guò)選項(xiàng)的選擇-（每個(gè)選項(xiàng)有不同的積分）積分的多少來(lái)給出評(píng)語(yǔ)
演示代碼：
<html><head><title>DHTML技術(shù)演示---radio的使用</title><meta http-equiv="content-Type" content="text/html; charset=utf-8"/><style type="text/css">#contentid{display:none;/*顯示：默認(rèn)隱藏*/}ul{/*無(wú)序列表*/background-color:#80ff00;/*背景色*/list-style:none;//前面的默認(rèn)小圓點(diǎn)取消margin:0px;//外補(bǔ)丁}ul li{/*設(shè)置ul中的li的字體顏色*/color:#ff0000;}.close{display:none;}.open{display:block;}</style><script type="text/javascript">function showContent(oRadioNode){var oDivNode = document.getElementById("contentid");if(oRadioNode.value=="yes"){oDivNode.style.display="block"; }else{oDivNode.style.display="none";}//第二種方式：利用with/*with(oDivNode.style){if(oRadioNode.value=="yes"){display="block";}else{display="none";}}*/}function showResult(){var oNolRadioNodes = document.getElementsByName("nol");var val=0;//undefined如果被用作boolean型也是false//alert(val);for(var x=0;x<oNolRadioNodes.length;x++ ){//找到那個(gè)被選中的單選框if(oNolRadioNodes[x].checked){val = parseInt( oNolRadioNodes[x].value );break;}}if(!val){document.getElementById("erroinfo").innerHTML="沒(méi)有任何答案被選中".fontcolor("red");return;}//錯(cuò)誤信息賦值為空。document.getElementById("erroinfo").innerHTML="";if(val>=1 && val<=3){document.getElementById("res_1").className="open";document.getElementById("res_2").className="close";}else{document.getElementById("res_1").className="close";document.getElementById("res_2").className="open";}}</script></head><body><div>您要參與問(wèn)卷調(diào)查嗎？<br/><!--radio 單選框 name一樣就是互斥--><input type="radio" name="wenjuan" value="yes" onclick="showContent(this)"/> 是<input type="radio" name="wenjuan" value="no" onclick="showContent(this)" checked="checked" /> 否<br/></div><div id="contentid">問(wèn)卷調(diào)查內(nèi)容:<br/>您的姓名：<input type="text" name="name" /><br/>您的電話：<input type="text" name="tel"/ ></div><hr/><h2>歡迎您參與性格測(cè)試</h2><h3>第一題：</h3><span>您喜歡的水果是什么？</span><ul id="nolul"><li><input type="radio" name="nol" value="1"/> 葡萄</li><li><input type="radio" name="nol" value="2"/> 西瓜</li><li><input type="radio" name="nol" value="3"/> 蘋(píng)果</li><li><input type="radio" name="nol" value="4"/> 芒果</li><li><input type="radio" name="nol" value="5"/> 櫻桃</li></ul><div><input type="button" value="查看測(cè)試結(jié)果" onclick="showResult()"><span id="erroinfo"></span><div id="res_1" class="close">1-3分：你的性格偏內(nèi)向，建議。。。</div><div id="res_2" class="close">4分以上：你的性格偏外向，建議。。。</div></div></body></html>360瀏覽器8.1 演示結(jié)果：
一開(kāi)始的頁(yè)面：
單選框選中”是”：
不選中水果時(shí)的提示：
選中水果時(shí)的提示：
下拉列表：
簡(jiǎn)單的演示代碼：
<html><head><title>DHTML技術(shù)演示---select的使用</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">.clrclass{height:50px;width:50px;float:left;/*漂浮*/margin-right:30px;margin-bottom:20px;/*下-外補(bǔ)丁*/ }#text{clear:left;/*左邊不能漂浮*/}</style><script type="text/javascript">function changeColor( oDicClrNode ){//得到要設(shè)置的顏色對(duì)象var colorVal = oDicClrNode.style.backgroundColor;//alert(colorVal);//設(shè)置字體的顏色document.getElementById("text").style.color=colorVal;}function changeColor2(){//alert("aabb");//試試能不能監(jiān)聽(tīng)var oSelectNode = document.getElementsByName("selectColor")[0];var collOptionNodes =oSelectNode.options;//options 獲取 select 對(duì)象中 option 對(duì)象的集合。 // for(var x=0;x<collOptionNodes.length;x++){// alert( collOptionNodes[x].innerHTML );// }//遍歷一下。//選中的選項(xiàng)//alert( collOptionNodes[ oSelectNode.selectedIndex ].innerHTML );var colorVar = collOptionNodes[ oSelectNode.selectedIndex ].value;document.getElementById("text").style.color=colorVar;}function changeColor3(){var oSelectNode = document.getElementsByName("selectColor")[1];var collOptionNodes = oSelectNode.options;var colorVar = collOptionNodes[ oSelectNode.selectedIndex ].value;document.getElementById("text").style.color=colorVar;}</script></head><body><div class="clrclass" id="clr1" style="background-color:black" onclick="changeColor(this)"></div><div class="clrclass" id="clr1" style="background-color:red" onclick="changeColor(this)"></div><div class="clrclass" id="clr2" style="background-color:green" onclick="changeColor(this)"></div><div class="clrclass" id="clr3" style="background-color:blue" onclick="changeColor(this)"></div><div class="clrclass" id="clr4" style="background-color:#c0c0c0;" onclick="changeColor(this)"></div><div class="clrclass" id="clr5" style="background-color:#00ffff" onclick="changeColor(this)"></div><div id="text"><img src=""/><br/>顯示效果文字<br/>顯示效果文字<br/>顯示效果文字<br/>顯示效果文字<br/></div><hr/><!-- //本例，給select注冊(cè)onclick事件不合適，因?yàn)槊看吸c(diǎn)擊下拉菜單最外層時(shí)就會(huì)執(zhí)行<select name="selectColor" onclick="changeColor2()">--><br/><select name="selectColor" onchange="changeColor2()"><option value="black">--選擇顏色--</option><option value="red">紅色</option><option value="green">綠色</option><option value="blue">藍(lán)色</option><option value="#c0c0c0">銀色</option></select><hr/><select name="selectColor" onchange="changeColor3()"><!--background-color 設(shè)置背景色 --><option value="black" style="background-color:black">--選擇顏色--</option><option value="red" style="background-color:red"> </option><option value="green" style="background-color:green"> </option><option value="blue" style="background-color:blue"> </option><option value="#c0c0c0" style="background-color:#c0c0c0"> </option></select></body></html>360瀏覽器8.1 演示結(jié)果：
這個(gè)下拉框是用文字來(lái)說(shuō)明。
下面這個(gè)下拉框直接用顏色來(lái)表明設(shè)置文字為什么顏色
加強(qiáng)的下拉列表-二級(jí)連動(dòng)菜單-代碼演示：
實(shí)現(xiàn)的功能就是，根據(jù)第一個(gè)菜單的選項(xiàng)，來(lái)決定第二個(gè)菜單的顯示。
<html><head><title>DHTML技術(shù)演示---select的使用--二級(jí)連動(dòng)菜單</title><meta http-equiv="content-type" content="text/html; charset=utf-8" /><script type="text/javascript">function selectCity(){//json: 用一個(gè)二維數(shù)組存儲(chǔ)"省份-城市集合",以后該數(shù)據(jù)要來(lái)自后臺(tái)var collProvices ={"beijing" : ['海淀區(qū)','東城區(qū)','西城區(qū)','朝陽(yáng)區(qū)'],"zhejiang" : ['杭州','寧波','金華','溫州'],"hunan" : ['益陽(yáng)','長(zhǎng)沙','株洲','湘潭'],"jiangxi" : ['南昌','九江','萍鄉(xiāng)','上饒']};//{}這個(gè)是用來(lái)存key:value的，value可以是任意類(lèi)型（數(shù)組集合都可以）、[]這個(gè)是數(shù)組//alert(collProvices["beijing"][2]);//西城區(qū)//獲取用戶(hù)所選擇省份的下轄城市集合var oSelNode = document.getElementById("selid");var index = oSelNode.selectedIndex;// selectedIndex選中哪項(xiàng)，返回?cái)?shù)字var proviceName = oSelNode.options[index].value;//獲得選中的那項(xiàng)的valuevar arrCities = collProvices[proviceName];//獲得選中的那個(gè)省份的下轄城市數(shù)組var oSubSelNode = document.getElementById("subselid");//獲得第二個(gè)下拉列表對(duì)象//把下拉菜單"subselid"中原有的內(nèi)容清空//注意，數(shù)組刪除之后，長(zhǎng)度是自動(dòng)更新的//法1--列表從前面開(kāi)始移除// for(var x=1;x<oSubSelNode.options.length;){//注意，數(shù)組刪除之后，長(zhǎng)度是自動(dòng)更新的，因此for最后不要用"x++"修正// oSubSelNode.removeChild( oSubSelNode.options[x] );// }//oSubSelNode.length和oSubSelNode.options.length的值一樣//oSubSelNode[x]和oSubSelNode.options[x]一樣//法2--列表從后面開(kāi)始移除// for(var x=oSubSelNode.length-1;x>=1;x--){// oSubSelNode.removeChild( oSubSelNode[x] );// }//法3--直接給oSubSelNode.options.length或oSubSelNode.length賦值oSubSelNode.options.length=1; //長(zhǎng)度設(shè)置為1 ，那么剩余的選項(xiàng)自動(dòng)被刪掉//把城市集合中的每個(gè)元素添加到下拉菜單"subselid"當(dāng)中for(var x=0;x<arrCities.length;x++){var optionNode = document.createElement("option");optionNode.innerHTML=arrCities[x];//oPtionNode.value=...[x];//正式開(kāi)發(fā)，應(yīng)該還有該選項(xiàng)對(duì)應(yīng)的value值要賦,這里我們就省略了。oSubSelNode.appendChild(optionNode);}}</script></head><body><select id="selid" onchange="selectCity()"><option>--選擇省份--</option><option value="beijing">北京</option><option value="hunan">湖南</option><option value="zhejiang">浙江</option><option value="jiangxi">江西</option></select><select id="subselid"><option>--選擇城市--</option></select></body></html>360瀏覽器8.1 演示結(jié)果：
file組件 主站蜘蛛池模板： 南平市| 永嘉县| 介休市| 嘉善县| 五河县| 本溪市| 德安县| 营口市| 商南县| 宽城| 乐平市| 红河县| 平顶山市| 四子王旗| 方城县| 青州市| 太湖县| 鹿邑县| 东源县| 沅陵县| 吴川市| 锡林郭勒盟| 迁西县| 泽普县| 鄄城县| 东光县| 浦县| 武乡县| 清流县| 八宿县| 昌邑市| 五指山市| 理塘县| 青铜峡市| 曲周县| 麻栗坡县| 福清市| 兴宁市| 清水县| 奉贤区| 保靖县|