이 섹션에서는 라디오 박스/드롭 다운 메뉴/추가 파일, CSS 합성, HTML 및 JavaScript의 구현에 대해 설명합니다. 특정 세부 사항은 다음과 같습니다.
라디오 박스 :
구현 된 기능은 다음과 같습니다. (일반적인 성격 테스트와 유사)
먼저 페이지의 일부를 숨긴 다음 라디오 박스를 클릭하여 표시하십시오.
그런 다음 옵션을 선택하여 댓글을 제공합니다. (각 옵션은 다른 점이 있습니다)
데모 코드 :
<html> <head> <title> DHTML 기술 데모 --- 라디오 사용 </title> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <스타일 유형 = "text/css">#contentid {display :/*show : default hilden*/} ul {/*unorded*/} 목록*/배경 색상 :#80ff00;/*배경색*/목록 스타일 : 없음; // 이전 기본 점은 마진 마진 : 0px; // 외부 패치} ul li {/*li의 글꼴 색상을 UL*/색상에서 설정합니다 :#ff0000;}. Close {display : none;}. showContent (oradionode) {var odivnode = docum } else {odivnode.style.display = "none";} // 두 번째 방법 :/*with/*with (odivnode.style) {if (oradionode.value == "yes") {display = "block";} else {display = "none";}}*/} function showResult () {var onolradodes = document.getElementsByName ( "nol"); val val = 0; // 부울 유형으로 사용되는 경우 정의되지 않은 경우 // alert (val); for (var x = 0; x <onolradionodes.length; x ++) {// 선택된 라디오 상자를 찾는 경우 (onolradionodes [x] .checked) {val = parseint (onolradionodes [x] .value); break;}} if (! val) {interhtml = " 선택한 ".fontColor ("red "); return;} // 오류 메시지가 비어 있습니다. document.getElementById ( "erroinfo"). innerhtml = ""; if (val> = 1 && val <= 3) {document.getElementById ( "res_1"). className = "Open"; docum .getElementById ( "res_1"). className = "close"; document.getElementById ( "res_2"). className = "Open";}} </script> </head> <body> <div> do 설문지에 참여하고 싶습니까? <br/> <!-라디오 라디오 박스 이름은 상호 배타적 인 것과 동일합니다-> <input type = "radio"name = "wenjuan"value = "yes"onclick = "showContent (this)"/> 예 <입력 유형 = "radio"name = "wenjuan"value = "no"onclick = "showContent (this)"checked "/> no>> no>> no>. id = "contentId"> 검색 내용 : <br/> 이름 : <입력 유형 = "text"name = "name"/> <br/> 전화 번호 : <input type = "text"name = "tel"/> </div> <hr/> <h2> 성격 테스트에 참여하는 데 오신 것을 환영합니다. </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"/> 망고 </li> <li> <입력 유형 = "radio"name = "nol"value = "5"/> Cherry </li> </ul> <div> <입력 유형 = "value ="value "onclick ="showresult () "> 내향적인 제안. . . </div> <div id = "res_2"> 4 점 이상 : 당신의 성격은 외향적이며 제안합니다. . . </div> </div> </body> </html>360 브라우저 8.1 데모 결과 :
처음의 페이지 :
라디오 박스에서 "예"를 선택하십시오.
과일을 선택하지 않을 때의 팁 :
과일을 선택할 때의 팁 :
드롭 다운 목록 :
간단한 데모 코드 :
<html> <head> <title> dhtml 기술 데모 --- select </title> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"> <Style type = "text/css">. clrclass {높이 : 50px; 너비 : 50px; float : 왼쪽;/*float*/margin-right : 30px; margin-bottom : 20px;/*하부 외부 패치*/} #text {left;/*float가 왼쪽;/} </style> <script = "text/javascrip." ODICCLRNODE) {// 색상 객체를 설정하여 var colorVal = odicclrnode.style.style.backgroundcolor; // alert (colorVal); // 글꼴의 색상을 설정합니다. document.getElementsByName ( "selectColor") [0]; var coloptionNodes = oselectNode.Options; // 옵션 선택 객체에서 옵션 개체 모음을 가져옵니다. // for (var x = 0; x <colloptionnodes.length; x ++) {// alert (coloptionnodes [x] .innerhtml); //} // traverse it. // 선택한 옵션 // alert (coloptionNodes [oselectNode.SelectedIngex] .innerHtml); var colorvar = coloptionNodes [oselectnode.selectedIndex] .value; oxper.getElementById ( "text"). style.color = colorVar; document.getElementsByName ( "selectColor") [1]; var coloptionNodes = oselectnode.options; var colorvar = coloptionNodes [oselectnode.SelectedIndex] .Value; oxper.getElementById ( "text"). style.color = colorvar;} </head> <body id = ""id = " 스타일 = "Back onclick = "changecolor (this)"> </div> <div id = "clr4"style = "background-color :#c0c0c0;" onclick = "changecolor (this)"> </div> <div id = "clr5"style = "back 텍스트 <br/> </div> <hr/> <!-//이 예에서는 <select name = "selectColor"onclick = "changecolor2 ()">-> <br/> <select value = "changeColor2 ()"> <옵션 "> </옵션>"> value = "red"> red </옵션> <옵션 값 = "green"> green </옵션> <옵션 value = "blue"> blue </옵션> <옵션 값 = "#c0c0c0"> silver </옵션> </select> <hr/> <select name = "selectColor"onchange = "changecolor3 ()">-<selection vankground vackground = "" 스타일 = "배경색">-선택 색상-</옵션> <옵션 값 = "빨간색"스타일 = "배경 색상 : 빨간색"> </옵션> <옵션 값 = "녹색"스타일 = "back </옵션> </select> </body> </html>360 브라우저 8.1 데모 결과 :
이 드롭 다운 상자는 단어로 설명됩니다.
아래의 드롭 다운 상자는 텍스트가 설정된 이유를 나타 내기 위해 색상을 직접 사용합니다.
강화 드롭 다운 목록 - 보조 링크 메뉴 - 코드 데모 :
구현 된 기능은 첫 번째 메뉴의 옵션을 기반으로 두 번째 메뉴의 표시를 결정하는 것입니다.
<html> <head> <title> dhtml 기술 데모 ------- 선택-고등학교 링크 메뉴 </title> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <script type = "text/javascript"> function selectCity () {json : a a a a a a a a json : "수집 및 데이터는 var colprovices = {"Beijing ": [ 'Haidian District', 'Dongcheng District', 'Xicheng District', 'chaoyang District'],"Zhejiang ": [ 'hangzhou', 'ningbo', 'Jinhua', 'Wenzhou']에서 나옵니다. [ 'Yiyang', 'Changsha', 'Zhuzhou', 'Xiangtan'], 'jiangxi ": ['nanchang ','jiujiang ','pingxiang ','shangrao '}; //} 이것은 값을 저장하는 데 사용됩니다. 가치가있을 수 있습니다 (배열 세트가 될 수 있습니다). // ALERT (CollProvices [ "Beijing"]] [2]); // Xicheng District // 사용자가 선택한 주에 종속 된 도시 세트를 가져옵니다. var oselnode = document.getElementById ( "Selid"); var index.selectedIndex; // 숫자 var 컨퍼런스 (oselnode). 항목 valuevar arrcities = collprovices [proviceName]; // 선택된 지방의 도시 배열을 선택한 주 var osubselnode = docum x = 1; x <osubselnode.options.length;) {// 배열이 삭제 된 후 길이가 자동으로 업데이트되므로 "x ++"을 사용하여 마지막 시간을 수정하여 // osubselnode.removechild (osubselnode.option [x]); //} // osubselnode.length 및 osubselnode.l.lend.lenge.l.lend.lenge.lend.lenge.lend.lenge.l 길이. osubselnode [x] 및 osubselnode.options [x] // 메소드 2-뒷면 // (var x = osubselnode.length-1; x> = 1; x-) {// osubselnode.removechild (osubselnode [x]); //} // 메소드 Osubselnode.lenge.length 또는 osubselnode.length.length = 1; // 길이를 1으로 설정하면 나머지 옵션이 자동으로 삭제됩니다. // 시티 컬렉션의 각 요소를 드롭 다운 메뉴 "subSelId"에 추가하십시오 (var x = 0; x <arrcities.length; x ++) {var 옵션 node = document.createElement ( "옵션"); OptionNode.innerhtml = arrcities [x]; // 옵션 node.value = ... [x]; // 공식 개발,이 옵션에 해당하는 값이 할당되어야하므로 여기에서 생략해야합니다. osubselnode.appendChild (OptionNode);}} </script> </head> <body> <select id = "selid"onchange = "selectCity ()"> 옵션>-셀렉션-</옵션> <옵션 값 = "베이징"> 베이징 </옵션> <옵션 value = "hunan"> 옵션> 옵션 value = "Zhejiang"> Zhejiang </옵션> <옵션 값 = "jiangxi"> jiangxi </옵션> </select> <select id = "subselid"> <pllence>-시티 선택-</옵션> </select> </html>360 브라우저 8.1 데모 결과 :
파일 구성 요소의 첨부 파일을 추가하고 삭제합니다
배경에 접촉하는 기능이없고 HTML에서 기술을 배우십시오.
데모 코드 :
<html> <head> <title> dhtml 기술 파일 구성 요소 add 및 삭제 첨부 </title> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <style type = "text/css">/*a : 링크 HyperLink가 클릭되지 않습니다. A : 액세스 후 방문 상태. A : 커서가 하이퍼 링크의 상태로 이동합니다 (클릭하지 않음). A : 하이퍼 링크를 클릭 할 때 상태를 활성화합니다. 사용 순서 : LVHA*/테이블 A : 링크, 표 A : 방문, img {텍스트 설명 : 없음;/* 텍스트 장식을 객체에서 검색하거나 설정하십시오. 텍스트 결정 : 없음 : 기본값. 장식 깜박임 없음 : 깜박임 밑줄 : 밑줄-스루 : 라인 오버 라인을 통해 : 오버 라인*/색상 :#0000ff;} 표 A : 호버 {색상 :#ff0000;} </style> <script type = "text/javaScript"> function addFile () {var ofileTablenode = document.getElemeByid ( "filetable"); ofiletablenode.insertrow (); // insertrow 테이블에 새 행 (tr)을 생성하고 행 컬렉션을 추가하십시오. var otdnodefile = otrnode.insertcell (); insertcell 테이블 행 (tr)에 새 셀을 생성하고 셀 수집에 셀을 추가하십시오. otdnodefile.innerhtml = "<input type = 'file'/>"; var otdnodedel = otrnode.insertcell (); // text // otdnodedel.innerhtml = "<a href = 'javaScript : void (0)'onclick = 'deletefile (delete </,) 이미지 --- 이미지를 찾아서 이름을 지정하고 이름을 지정하거나 코드 OTDNodedel.innerhtml = "<img src = 'a.jpg'alt = 'delete afchment'onclick = 'deletefile (this)'/>"} 함수 deletefile (oanode) {// 태그 상위 노드 is td 및 td is tr. var otrnodedel = ooanode.parentnode.parentNode; // trotrnodedel.parentNode.removeChild (otrnodedel)} </script> </head> <body> <table id = "filetable"> <t> <th> <a href = "javascript : void (0)" "" "" "" "void (0) 첨부 파일 </a> </th> </tr> <! --- 첨부 파일을 추가하려면 버튼을 누릅니다. html을 사용하지 말고 html을 사용하지 마십시오. javaScript <tr> <td> <td> <input type = "file"/> </td> <td> <a href = "javascript : void (0)"onclick = "deletefile (this)"> </td> </td> </td>. </table> </body> </html>360 브라우저 8.1 데모 결과 :
두 번째 줄 tr : 삭제 :
위의 것은 JavaScript를 기반으로 JavaScript를 기반으로 파일 효과를 추가하는 것에 대한 관련 지식입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 더 알고 싶다면 Wulin.com에주의를 기울이십시오!