Esta sección describe la implementación del cuadro de radio/menú desplegable/Agregar archivos, síntesis de CSS, HTML y JavaScript. Los detalles específicos son los siguientes:
Box de radio:
Las funciones implementadas son: (similar a la prueba de personalidad habitual)
Escriba primero una parte de la página y luego visualelo haciendo clic en el cuadro de radio.
Luego, dé los comentarios seleccionando opciones - (cada opción tiene diferentes puntos)
Código de demostración:
<html> <fead> <title> DHTML Technology Demossion --- Uso de radio </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <style type = "text/css">#contentid {visual List*/Background-Color:#80ff00;/*Background Color*/List-Style: Ninguno; // El margen de puntos predeterminado de puntos predeterminado anterior: 0px; // Patch externo} ul Li {/*Establecer el color de la fuente de Li en ul*/color:#FF0000;}. Close {Display: Ninguno;}. Open {Display: Bloque; showContent (oradionode) {var odivnode = document.getElementById ("contentId"); if (oradionode.value == "yes") {odivnode.style.display = "block"; } else {odivnode.style.display = "none";} // La segunda forma: use con/*con (odivnode.style) {if (oradionode.value == "yes") {display = "bloque";} else {display = "none";}}*/} showResult () {var onolradionodes document.getElementsByName ("nol"); var val = 0; // indefinido si se usa como tipo booleano es falso // alerta (val); for (var x = 0; x <onolradionodes.length; x ++) {// Encontrar el cuadro de radio seleccionado if (onolradionodes [x] .ecked) {val = parseInt (onolradionodes [x] .value); break;}} if (! val) {document.getEmementByid ("erroinfo"). innerhtml = "no respeta. seleccionado ".fontcolor (" rojo "); return;} // El mensaje de error se asigna a vacío. document.getElementById ("erroinfo"). innerhtml = ""; if (val> = 1 && val <= 3) {document.getElementById ("res_1"). className = "Open"; document.getElementById ("res_2"). classname = "Close";} else {documento .getElementById ("res_1"). classname = "cerrar"; document.getElementById ("res_2"). className = "Open";}} </script> </head> <body> <div> do ¿Quieres participar en el cuestionario? <br/> <!-El nombre de la caja de radio de radio es el mismo que mutuamente excluyente-> <input type = "radio" name = "wenjuan" value = "sí" onClick = "showContent (this)"/> yes <input type = "radio" name = "wenjuan" value = "no" onClick = "showcontent (this)" versado = "verselado"/> no <br/> </> </> <br/> <br/> <ithusnlick = " id = "ContentId"> Search Content: <br/> Su nombre: <input type = "text" name = "name"/> <BR/> su número de teléfono: <input type = "text" name = "tel"/> </div> <hr/> <h2> Bienvenido a participar en la prueba de personalidad </h2> <h3> Pregunta 1: </h3> <pans es su fruta favorita? </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 = "ver resultados de prueba" en ondclick ("showResult ()"> <span id = "erroinfo"> </span> <dividi = "res_1"> 1-3 puntos: su personalización es intrigada, es introduct. . . </div> <div id = "res_2"> arriba de 4 puntos: su personalidad es extrovertida, sugerencia. . . </div> </div> </body> </html>360 Browser 8.1 Resultados de demostración:
La página al principio:
Seleccione "Sí" en el cuadro de radio:
Consejos al no seleccionar frutas:
Consejos Al seleccionar frutas:
Lista desplegable:
Código de demostración simple:
<html> <fead> <title> demostración de tecnología dhtml --- uso de select </title> <meta http-oquiv = "content-type" content = "text/html; charset = utf-8"> <style type = "text/css">. clrclass {altura: 50px; width: 50px; float: left;/*float*/margin-right: 30px; margin-bottom: 20px;/*Lower-EXTernal odicclrnode) {// Obtener el objeto de color que se establece var colorval = odicclrnode.style.backgroundcolor; // alert (colorval); // Establezca el color del font document.getElementByid ("text"). style.color = colorval;} function cambhangeColor2 () {// alerta document.getElementsByName ("SelectColor") [0]; var coloctionNodes = oselectNode.options; // Opciones Obtener la colección de objetos de opción en el objeto SELECT. // for (var x = 0; x <colloptionNodes.length; x ++) {// alerta (coloctionNodes [x] .innerhtml); //} // atravesarlo. // opción seleccionada // alerta (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 coloctionNodes = oselectNode.options; var colorvar = coloptionNodes [oselectNode.selectedIndex] .value; document.getElementById ("text"). style.color = colorvar;} </script> <body> <body> <bviD Id = "CLR1"). style = "Background-Color: Black" OnClick = "Changecolor (this)"> </div> <div id = "clr1" style = "de fondo: rojo: rojo" onClick = "Changecolor (this)"> </div> <Div Id = "clr2" style = "de fondo: verde: verde" onclick = "Changecolor (this)" </div> <viD <Viv Id = "CLR3" Style "Style" Style " onClick = "Changecolor (this)"> </div> <div id = "clr4" style = "de fondo de fondo:#C0C0C0;" onClick = "Changecolor (this)"> </iv> <div id = "clr5" style = "en segundo plano:#00ffff" onClick = "Changecolor (this)"> </div> <div id = "text"> <img src = ""/> <br/> show teffect <br/> show Effect Text <br/> Show Effect Text <Br/> Effect Effect <BR/> Texto <br/> </div> <hr/> <!-// En este ejemplo, no es apropiado registrar un evento OnClick para seleccionar, porque <select name = "selectColor" onClick = "ChangeColor2 ()">-> <br/> <select name = "selectColor" onChange = "ChangeColor2 ()"> <Opción Valor = "Negro">-Seleccionar Color-<opción <opción <opción> 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> <opción valor valor = "rojo" style = "de fondo de fondo: rojo"> </opción> <opción value = "verde" style = "de fondo de fondo: verde"> </opción> <opción valor = "azul" style = "de fondo: azul"> </opción> <opción valor = "#c0c0c0" style = "de fondo de fondo:#c0c0c0"> </option> </select </select </select </select </select </select </select </select </select </selic360 Browser 8.1 Resultados de demostración:
Este cuadro desplegable se explica en palabras.
El cuadro desplegable a continuación usa directamente el color para indicar por qué se establece el texto.
Lista desplegable con fortalecimiento - Menú de enlaces secundarios - demostración de código:
La función implementada es determinar la visualización del segundo menú en función de las opciones del primer menú.
<html> <fead> <title> demostración de tecnología dhtml ---- uso de selección-menú de enlaces secundario </title> <meta http-oquiv = "content-type" content = "text/html; charset = utf-8"/> <script type = "text/javaScript"> function selectCity () {// JSON: USE A dos-dimension tye a t suldincin colección ", y los datos vendrán de los antecedentes var colprovices = {" beijing ": ['Distrito haidiano', 'Distrito Dongcheng', 'Distrito Xicheng', 'Distrito de Chaoyang']," Zhejiang ": ['Hangzhou', 'Ningbo', 'Jinhua', 'Wenzhou']," Hunan "::":: ":": ":": ":": ":": ":": ":": ": hunan": ['Yiyang', 'changsha', 'zhuzhou', 'xiangtan'], "jiangxi": ['nanchang', 'jiujiang', 'pingxiang', 'shangrao']}; // {} Esto se usa para almacenar la clave: el valor, el valor puede ser de cualquier tipo (un set de Array puede ser), [] // alerta (collprovisics ["beijing"] [2]); // xicheng distrito // Obtener el conjunto de la ciudad de subordinado a la provincia seleccionada por el usuario var oselnode = document.getElementById ("selid"); var index = oselNode.selectedIndex; // qué elemento se selecciona, devuelve el número var de la provisión = oselNode.options [índice] .value; Arrcities = collProvisices [ProvicEname]; // Obtenga la matriz de la ciudad de la provincia seleccionada var osubSelNode = document.getElementById ("subselid"); // Obtenga el segundo objeto desplegable // Borre el contenido original en el menú desplegable "Subselid" // Tenga en cuenta que después de que se elimine la matriz, la longitud se actualiza automáticamente // método 1-remo x = 1; x <osubselnode.options.length;) {// Tenga en cuenta que después de que se elimina la matriz, la longitud se actualiza automáticamente, por lo que no use "x ++" para corregir la última vez // osubselnode.removechild (osubselnode.options [x]); //} // osubselnode.length y OsubselNode.Options.Options.LlInment. OsubSelNode [x] y OsubSelNode.options [x] // método 2--removechild desde la parte posterior // para (var x = osubSelnode.length-1; x> = 1; x-) {// OsubSelNode.remoVeChild (OsubSelNode [x]); //} // El método 3-Suppose directamente asigna OsubSelnode.Options osubselnode.length.length = 1; // Establezca la longitud en 1, entonces las opciones restantes se eliminarán automáticamente // Agregar cada elemento en la colección de la ciudad al menú desplegable "Subselid" para (var x = 0; x <arrcities.length; x ++) {var optionNode = document.createElement ("opción"); opcionNode.innerHtml = Arrcities [x]; // opcionNode.Value = ... [x]; // Desarrollo formal, debe haber un valor correspondiente a esta opción a asignarse, por lo que lo omitimos aquí. OsubSelnode.AppendChild (opcionNode);}} </script> </head> <body> <select id = "selid" onChange = "selectcity ()"> <opción>-seleccione Provincia-</ppection> <opción valor = "beijing"> beijing </opción> <opción valor = "hunan"> hunan </ppection> <option> value = "zhejiang"> zhejiang </option> <option value = "jiangxi"> jiangxi </option> </select> <select id = "subselid"> <option>-seleccione City-</option> </select> </body> </html>360 Browser 8.1 Resultados de demostración:
Agregue y elimine los archivos adjuntos para los componentes del archivo
No hay función para contactar el fondo, solo aprenda la tecnología en HTML
Código de demostración:
<html> <fead> <title> DHTML Technology-File Component-ADD y Eliminar los archivos adjuntos </title> <meta http-oquiv = "content-type" content = "text/html; charset = utf-8"/> <style type = "text/css">/*a: enlace el hyperlink no se hace clic. R: Estado visitado después de ser accedido. R: Rover el cursor se mueve al estado en el hipervínculo (no se hace clic). R: Active el estado al hacer clic en el hipervínculo. Use el orden: LVHA*/Tabla A: Enlace, Tabla A: Visitado, IMG {TEXT-Decoration: Ninguno;/* Recupere o establezca la decoración del texto en el objeto. Decoración de texto: Ninguno: valor predeterminado. Sin parpadeo decorativo: Blink subraye: subraye-through: a través de la línea Overline: Overline*/Color:#0000ff;} Tabla A: Hover {Color:#FF0000;} </style> <script type = "text/javaScript"> function addFile () {var ofIletableNde = document.getElementByid ("filetable"); var otrnode = = var otRnode = OfileTablenode.insertrow (); // InserTrow Cree una nueva fila (TR) en la tabla y agregue la colección de filas. var otdnodeFile = oTrnode.insertcell (); // InsertCell Cree una nueva celda en la fila de tabla (TR) y agregue la celda a la colección de celdas. otdnodeFile.innerHtml = "<input type = 'file'/>"; var otdNodeDel = oTrNode.insertCell (); // use text // otdnodeDel.innerHtml = "<a href = 'javaScript: void (0)' onclick = 'deletefile (this)'> eletentment </ae>"; Imagen --- Encuentre una imagen tú mismo y así seglate que a.jpg-o cambia el código otdnodedel.innerhtml = "<img src = 'a.jpg' alt = 'delete adjunto' onclick = 'deletefile (this)'/>";} function deleteFile (oanode) {// una etiqueta nodo matriz es td, y td node es tr. var oTrnodeDel = oanode.ParentNode.ParentNode; // trotrNodeDel.ParentNode.remoVeChild (oTrnodeDel);} </script> </to/head> <body> <table id = "filetable"> <tr> <th> Adjunto </a> </th> </tr> <! --- Toque el botón para agregar archivos adjuntos, así que no use html, escriba en javascript <tr> <td> <input type = "file"/> </td> <td> <a href = "javaScript: void (0)" onclick = "deletefile (esto)" "Delete adjunte </a> </tha </t/th. </table> </body> </html>360 Browser 8.1 Resultados de demostración:
Eliminar la segunda línea tr:
Lo anterior es el conocimiento relevante sobre cómo agregar efectos de archivo basados en JavaScript basado en JavaScript para usted. Espero que te sea útil. Si desea saber más, ¡preste atención a Wulin.com!