In diesem Abschnitt wird die Implementierung des Radierfelds/Dropdown-Menüs/Hinzufügen von Dateien, Synthese von CSS, HTML und JavaScript beschrieben. Die spezifischen Details sind wie folgt:
Radiobox:
Die implementierten Funktionen sind: (ähnlich dem üblichen Persönlichkeitstest)
Verstecken Sie zuerst einen Teil der Seite und zeigen Sie ihn anschließend an, indem Sie auf das Radierfeld klicken.
Geben Sie dann die Kommentare an, indem Sie Optionen auswählen - (jede Option hat unterschiedliche Punkte).
Democode:
<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 Liste*/Hintergrundfarbe:#80ff00;/*Hintergrundfarbe*/Listenstil: None; // Der vorherige Standard-Punkt storniert den Rand: 0px; // externer Patch} ul li {/*Setzen Sie die Schriftfarbe von li in ul*/color:#ff0000;}. Schließen {{display: non;}. Open {{display: block:} </style> </style> </style> </style> </style> </style> </style> </style> </style> </style> </style> </style> </style> </style> </style> </style> </style> </style> </style> </style> </style; showContent (oradionode) {var odivnode = document.getElementById ("contentID"); if (oradionode.value == "yes") {odivnode.style.display = "block"; } else {odivnode.style.display = "none";} // Der zweite Weg: Verwendung mit/*mit (odivnode.style) {if (oradionode document.GetElementsByName ("nol"); var val = 0; // undefiniert, wenn als Boolean -Typ verwendet wird, ist falsch // alarm (val); für (var x = 0; x <onolRadionodes.length; x ++) {// das ausgewählte Radio -Box findet if (OnolRadionodes [x]. Ausgewählt ".FontColor (" rot "); zurück;} // Die Fehlermeldung wird leer zugewiesen. 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 Sie möchten am Fragebogen teilnehmen? <br/> <!-Der Name des Radio-Radio-Feldes ist der gleiche wie ein gegenseitig exklusives-> <Eingabe type = "Radio" name = "Wenjuan" value = "yes" onclick = "Showcontent (this)"/> yes <input type = "radio" name = "wenjuan" value = "no" Onclick = "Divedcontent (this)" checked "checked id = "contentID"> Inhalt suchen: <br/> Ihr Name: <Eingabe type = "text" name = "name"/> <br/> Ihre Telefonnummer: <input type = "text" name = "tel"/> </div> <hr/> <h2> Willkommen, Willkommen, um am Persönlichkeitstest teilzunehmen. </span> <ul id = "nolul"> <li> <Eingabe type = "radio" name = "nol" value = "1"/> Traube </li> <li> <Eingabe type = "radio" name = "nol" value = "2"/> watermelon </li> <Eingabe type = "radio" name = "value". 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"> über 4 Punkten: Ihre Persönlichkeit ist extrovertiert, Vorschlag. . . </div> </div> </body> </html>360 Browser 8.1 Demonstrationsergebnisse:
Die Seite am Anfang:
Wählen Sie im Radio "Ja": "Ja":
Tipps, wenn Sie keine Früchte auswählen:
Tipps bei der Auswahl von Früchten:
Dropdown-Liste:
Einfacher Democode:
<html> <kopf> <titels> DHTML-Technologie Demonstration --- Verwendung von Select </title> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"> <style type = "text/css">. clrclass {Höhe: 50px; width: 50px; float: links;/*float*/margin-right: 30px; margin-bottom: 20px;/*niedriger-externales patch*/} #text {clear: links;/*float auf der linken Seite*/} </styflex </styflex </stylection tection {stylection-type änderung nicht float ". odicclrnode) {// Das Farbobjekt setzt var colorval = odicclrnode.style.backgroundColor; // alarm (colorval); // Setzen Sie die Farbe des Schriftarts Dokument.GetElementById ("text"). = document.GetElementsByName ("selectColor") [0]; var coloptionnodes = oseselectNode.options; // Optionen erhalten die Sammlung von Optionsobjekten im SELECT -Objekt. // für (var x = 0; x <coloptionnodes.length; x ++) {// alert (coloptionnodes [x] .innerhtml); //} // durchqueren. // Ausgewählte Option // alert (coloptionnodes [oseselectnode.selectedIndex] .innerhtml); var colorvar = coloptionnodes [oselectNode.SelectedIndex] .Value; document.getElementById ("Text"). Style.color = colorvar; document.getElementsByName ("selectColor") [1]; var coloptionnodes = oseselectnode.options; var colorvar = coloptionnodes [oselectnode.SeselectedIndex] .Value; document.getElementById ("text"). 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 diesem Beispiel ist es nicht angemessen, ein Onclick-Ereignis für Select zu registrieren, da <select name = "selectColor" onclick = "echnecolor2 ()">-> <br/> <Select name = "selectColor" onchange = "echouswolor2 ()"> <option = "> <option =" option = "option =" option = "option value = "rot"> rot </option> <option value = "green"> green </option> <option value = "blau"> blau </option> <option value = "#c0c0c0"> silber </option> </select> <hr/> <select name = "selectColor" auf der farbhärte-> <-Option = "änderung style = "Hintergrundfarbe: schwarz">-Wählen Sie Farbe-</option> <Option Value = "Red" style = "Hintergrundfarbe: rot"> </option> <Option Value = "green" style = "background-color: green"> </option> <option value = "blau" style = "background-color: blau </option> </select> </body> </html>360 Browser 8.1 Demonstrationsergebnisse:
Dieses Dropdown-Box wird in Worten erklärt.
Das Dropdown-Feld unten verwendet direkt Farbe, um anzugeben, warum der Text festgelegt ist
Stärkung der Dropdown -Liste - Sekundärlinkmenü - Codedemonstration:
Die implementierte Funktion besteht darin, die Anzeige des zweiten Menüs basierend auf den Optionen des ersten Menüs zu bestimmen.
<html> <Head> <titels> DHTML-Technologie Demonstration ---- Verwendung von SELECONDARY LINK </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/<script type Sammlung "und die Daten stammen aus dem Hintergrund var collprovices = {" Peking ": ['Haidian District', 'Dongcheng District', 'Xicheng District', 'Chaoyang District'," Zhejiang ": ['Hangzhou', 'Ningbo', 'Jinhua', Wenzhou ',',", ",": ":" ['Yiyang', 'changsha', 'zhuzhou', 'xiangtan'], "jiangxi": ['nanchang', 'jiujiang', 'pingxiang', 'shangrao']}; // {} Dies wird verwendet. // alert (collprovices ["peking"] [2]); // xicheng Distrikt // Die von dem Benutzer var Oselnode = document.getElementById ("selid"); var index = oselnode.SelectedIndex; Item ValueVar Arrcities = Collprovices [Anbietername]; // Erhalten Sie das Stadtarray der ausgewählten Provinz var osubselnode = document. x = 1; x <osubselnode.options.Length;) {// Beachten Sie, dass nach dem Löschen des Arrays die Länge automatisch aktualisiert wird. Verwenden Sie also nicht "x ++", um zum letzten Mal zu korrigieren // osubselnode.removeChild (osubselnode.options [x]). 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; // Länge auf 1 festlegen, dann werden die verbleibenden Optionen automatisch gelöscht // Fügen Sie jedes Element in der Stadtsammlung dem Dropdown-Menü "subSelid" für (var x = 0; x <arrcities.length; x ++) {var optionNode = document.createelement ("Option") gelöscht. OptionNode.innerHtml = Arrcities [x]; // optionNode.value = ... [x]; // formale Entwicklung sollte ein Wert geben, der dieser Option zugewiesen werden kann, sodass wir sie hier weglassen. osubselnode.appendChild (OptionNode);}} </script> </head> <body> <select id = "selid" onchange = "selectCity ()"> <option>-provinz auswählen-</option> <option value = " value = "zhejiang"> zhejiang </option> <option value = "jiangxi"> jiangxi </option> </select> <select id = "subSelid"> <option>-Select City-</option> </select> </body> </html>360 Browser 8.1 Demonstrationsergebnisse:
Anhänge für Dateikomponenten hinzufügen und löschen
Es gibt keine Funktion, um den Hintergrund zu kontaktieren. Erfahren Sie einfach die Technologie in HTML
Democode:
<html> <Head> <titels> DHTML Technology-File-Komponenten-ADD- und Löschen von Anhängen </title> <meta http-äquiv = "Inhaltstyp" content = "text/html; charset = utf-8"/> <style type = "text/css">/*a: Link the hyperlink ist nicht klicked. A: Der Status besucht nach dem Zugriff. A: Bewegen Sie den Cursor zum Status im Hyperlink (nicht geklickt). A: Aktiv den Status beim Klicken auf den Hyperlink. Verwenden Sie Reihenfolge: LVHA*/Tabelle A: Link, Tabelle A: Besucht, IMG {Textdekoration: Keine;/* Rufen oder legen Sie die Dekoration des Textes im Objekt ab. Textabschreibung: Keine: Standardwert. Kein dekoratives Blink: Blink Underline: Unterstreichung: Durch Zeilenüberlinie: Überlinie*/Farbe:#0000ff;} Tabelle A: Hover {Farbe:#ff0000;} </style> <script type = "text/javaScript"> Funktion adddatfile () {var Ofiletable. OfiletableOde.insertrow (); // Insertrow Erstellen Sie eine neue Zeile (TR) in der Tabelle und fügen Sie die Zeilensammlung hinzu. var otdnodeFile = otrnode.insertcell (); // InsertCell erstellen eine neue Zelle in der Tabellenzeile (TR) und fügen Sie die Zelle der Zellensammlung hinzu. otdnodeFile.innerhtml = "<Eingabe type = 'file'/>"; var otdnodedel = otrnode.insertcell (); // text // otdnodedel Bild --- Finden Sie selbst ein Bild und nennen Sie es a.jpg-or den Code otdnodedel. var otrnodedel = oanode.parentnode.parentnode; // trotrnodedel.parentnode.removechild (otrnodedel);} </script> </head> <body> <table id = "fileTable"> <tr> <th> <a href = "javaScript: void (0)" adfile () addf = "javaScript: void (0)" onclick = "onLy" onLy "on Anhang </a> </th> </tr> <! --- Tippen Sie auf die Taste, um Anhänge hinzuzufügen. Verwenden Sie also nicht html, schreiben Sie in JavaScript <tr> <td> <Eingabe type = "file"/> </td> <td> <a href = "javascript: void (0)" Onclick = "DeleteFile (this)-"> ">"> "-"-Dies). " </table> </body> </html>360 Browser 8.1 Demonstrationsergebnisse:
Löschen Sie die zweite Zeile Tr:
Das obige ist das relevante Wissen über das Hinzufügen von Dateieffekten basierend auf JavaScript basierend auf JavaScript zu Ihnen. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie mehr wissen möchten, achten Sie bitte wulin.com!