This section describes the implementation of radio box/drop-down menu/add files, synthesis of css, html and JavaScript. The specific details are as follows:
Radio box:
The functions implemented are: (similar to the usual personality test)
Hide a portion of the page first, and then display it by clicking the radio box.
Then give the comments by selecting options - (each option has different points)
Demo code:
<html><head><title>DHTML technology demonstration---use of radio</title><meta http-equiv="content-Type" content="text/html; charset=utf-8"/><style type="text/css">#contentid{display:none;/*Show: default hidden*/}ul{/*Unordered list*/background-color:#80ff00;/*Background color*/list-style:none;//The previous default dot cancels margin:0px;//External patch}ul li{/*Set the font color of li in ul*/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";}//The second way: use with/*with(oDivNode.style){if(oRadioNode.value=="yes"){display="block";}else{display="none";}}*/}function showResult(){var oNolRadioNodes = document.getElementsByName("nol");var val=0;//undefined if used as boolean type is false//alert(val); for(var x=0;x<oNolRadioNodes.length;x++ ){//Finding the selected radio box if(oNolRadioNodes[x].checked){val = parseInt(oNolRadioNodes[x].value );break;}}if(!val){document.getElementById("erroinfo").innerHTML="No answer is selected".fontcolor("red");return;}//The error message is assigned to empty. 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>Do you want to participate in the questionnaire? <br/><!--radio radio box name is the same as mutually exclusive-><input type="radio" name="wenjuan" value="yes" onclick="showContent(this)"/> Yes <input type="radio" name="wenjuan" value="no" onclick="showContent(this)" checked="checked" /> No<br/></div><div id="contentid">Search content:<br/>Your name:<input type="text" name="name" /><br/>Your phone number:<input type="text" name="tel"/ ></div><hr/><h2>Welcome to participate in the personality test</h2><h3>Question 1:</h3><span>What is your favorite fruit? </span><ul id="nolul"><li><input type="radio" name="nol" value="1"/> Grape </li><li><input type="radio" name="nol" value="2"/> Watermelon </li><li><input type="radio" name="nol" value="3"/> Apple </li><li><input type="radio" name="nol" value="4"/> Mango </li><li><input type="radio" name="nol" value="5"/> Cherry </li></ul><div><input type="button" value="View test results" onclick="showResult()"><span id="erroinfo"></span><div id="res_1">1-3 points: Your personality is introverted, suggestion. . . </div><div id="res_2">Above 4 points: Your personality is extroverted, suggestion. . . </div></div></body></html>360 Browser 8.1 Demonstration Results:
The page at the beginning:
Select "Yes" in the radio box:
Tips when not selecting fruits:
Tips when selecting fruits:
Drop-down list:
Simple demo code:
<html><head><title>DHTML technology demonstration---use of select</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">.clrclass{height:50px;width:50px;float:left;/*Float*/margin-right:30px;margin-bottom:20px;/*lower-external patch*/ }#text{clear:left;/*Float cannot float on the left*/}</style><script type="text/javascript">function changeColor( oDicClrNode ){//Get the color object to be set var colorVal = oDicClrNode.style.backgroundColor;//alert(colorVal);//Set the color of the font document.getElementById("text").style.color=colorVal;}function changeColor2(){//alert("aabb");//Try to listen to var oSelectNode = document.getElementsByName("selectColor")[0];var colOptionNodes =oSelectNode.options;//options Get the collection of option objects in the select object. // for(var x=0;x<collOptionNodes.length;x++){// alert( colOptionNodes[x].innerHTML );// }// traverse it. //Selected option//alert( colOptionNodes[ oSelectNode.selectedIndex ].innerHTML );var colorVar = colOptionNodes[ oSelectNode.selectedIndex ].value;document.getElementById("text").style.color=colorVar;}function changeColor3(){var oSelectNode = document.getElementsByName("selectColor")[1];var colOptionNodes = oSelectNode.options;var colorVar = colOptionNodes[ oSelectNode.selectedIndex ].value;document.getElementById("text").style.color=colorVar;}</script></head><body><div id="clr1" style="background-color:black" onclick="changeColor(this)"></div><div id="clr1" style="background-color:red" onclick="changeColor(this)"></div><div id="clr2" style="background-color:green" onclick="changeColor(this)"></div><div id="clr3" style="background-color:blue" onclick="changeColor(this)"></div><div id="clr4" style="background-color:#c0c0c0;" onclick="changeColor(this)"></div><div id="clr5" style="background-color:#00ffff" onclick="changeColor(this)"></div><div id="text"><img src=""/><br/>Show effect text<br/>Show effect text<br/>Show effect text<br/>Show effect text<br/>Show effect text<br/></div><hr/><!-- //In this example, it is not appropriate to register an onclick event for select, because <select name="selectColor" onclick="changeColor2()">--><br/><select name="selectColor" onchange="changeColor2()"><option value="black">--Select color--</option><option value="red">Red</option><option value="green">Green</option><option value="blue">Blue</option><option value="#c0c0c0">Silver</option></select><hr/><select name="selectColor" onchange="changeColor3()"><!--background-color Set background color--><option value="black" style="background-color:black">--Select color--</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 Browser 8.1 Demonstration Results:
This drop-down box is explained in words.
The drop-down box below directly uses color to indicate why the text is set
Strengthened drop-down list - secondary link menu - code demonstration:
The implemented function is to determine the display of the second menu based on the options of the first menu.
<html><head><title>DHTML technology demonstration----use of select--secondary link menu</title><meta http-equiv="content-type" content="text/html; charset=utf-8" /><script type="text/javascript">function selectCity(){//json: Use a two-dimensional array to store "province-city collection", and the data will come from the background var colProvices ={"beijing" : ['Haidian District','Dongcheng District','Xicheng District','Chaoyang District'],"zhejiang" : ['Hangzhou','Ningbo','Jinhua','Wenzhou'],"hunan" : ['Yiyang','Changsha','Zhuzhou','Xiangtan'],"jiangxi" : ['Nanchang','Jiujiang','Pingxiang','Shangrao']};//{} This is used to store key:value, value can be of any type (an array set can be), [] This is an array //alert(collProvices["beijing"][2]);//Xicheng District//Get the city set of subordinate to the province selected by the user var oSelNode = document.getElementById("selid");var index = oSelNode.selectedIndex;// Which item is selected, return the number var provisionName = oSelNode.options[index].value;//Get the selected item valuevar arrCities = collProvices[proviceName];//Get the city array of the selected province var oSubSelNode = document.getElementById("subselid");//Get the second drop-down list object//Clear the original content in the drop-down menu "subselid"//Note that after the array is deleted, the length is automatically updated //Method 1-Remove from the previous one // for(var x=1;x<oSubSelNode.options.length;){//Note that after the array is deleted, the length is automatically updated, so do not use "x++" to correct for the last time // oSubSelNode.removeChild( oSubSelNode.options[x] );// }// oSubSelNode.length and oSubSelNode.options.length are the same // oSubSelNode[x] and oSubSelNode.options[x]// Method 2--RemoveChild from the back // for(var x=oSubSelNode.length-1;x>=1;x--){// oSubSelNode.removeChild( oSubSelNode[x] );// }// Method 3-Suppose directly assigns oSubSelNode.options.length or oSubSelNode.length.length=1; // Set length to 1, then the remaining options will be deleted automatically // Add each element in the city collection to the drop-down menu "subselid" for(var x=0;x<arrCities.length;x++){var optionNode = document.createElement("option"); optionNode.innerHTML=arrCities[x];//oPtionNode.value=...[x];// Formal development, there should be a value corresponding to this option to be assigned, so we omit it here. oSubSelNode.appendChild(optionNode);}}</script></head><body><select id="selid" onchange="selectCity()"><option>--Select province--</option><option value="beijing">Beijing</option><option value="hunan">Hunan</option><option value="zhejiang">Zhejiang</option><option value="jiangxi">Jiangxi</option></select><select id="subselid"><option>--Select city--</option></select></body></html>360 Browser 8.1 Demonstration Results:
Add and delete attachments for file components
There is no function to contact the background, just learn the technology in html
Demo code:
<html><head><title>DHTML technology-file component-add and delete attachments</title><meta http-equiv="content-type" content="text/html; charset=utf-8" /><style type="text/css">/*a:link The hyperlink is not clicked. a: visited Status after being accessed. a:hover The cursor moves to the status on the hyperlink (not clicked). a:active The status when clicking on the hyperlink. Use order: LVHA*/table a:link,table a:visited, img{text-decoration:none;/* Retrieve or set the decoration of text in the object. text-decoration:none : Default value. No decorative blink : Blink underline : Underline-through : Through line overline : Overline*/color:#0000ff;}table a:hover{color:#ff0000;}</style><script type="text/javascript">function addFile(){var oFileTableNode = document.getElementById("fileTable");var oTrNode = oFileTableNode.insertRow();//insertRow Create a new row (tr) in the table and add the rows collection. var oTdNodeFile = oTrNode.insertCell();//insertCell Create a new cell in the table row (tr) and add the cell to the cells collection. oTdNodeFile.innerHTML="<input type='file'/>";var oTdNodeDel = oTrNode.insertCell();//Use text//oTdNodeDel.innerHTML="<a href='javascript:void(0)' onclick='deleteFile(this)'>Delete attachment</a>";//Use image---find an image yourself and name it a.jpg-or change the code oTdNodeDel.innerHTML="<img src='a.jpg' alt='Delete attachment' onclick='deleteFile(this)'/>";}function deleteFile(oANode){//a tag parent node is td, and td parent node is tr. var oTrNodeDel = oANode.parentNode.parentNode;//TRoTrNodeDel.parentNode.removeChild( oTrNodeDel );}</script></head><body><table id="fileTable"><tr><th><a href="javascript:void(0)" onclick="addFile()">Add attachment</a></th></tr><!---Tap the button to add attachments, so don't use html, write in JavaScript<tr><td><input type="file"/> </td><td> <a href="javascript:void(0)" onclick="deleteFile(this)">Delete attachment</a> </td></tr>--> </table></body></html>360 Browser 8.1 Demonstration Results:
Delete the second line tr:
The above is the relevant knowledge about adding file effects based on JavaScript based on JavaScript to you. I hope it will be helpful to you. If you want to know more, please pay attention to Wulin.com!