Cette section décrit l'implémentation des fichiers radio Box / Drop-down Menu / ADD, Synthesis of CSS, HTML et JavaScript. Les détails spécifiques sont les suivants:
Radio Box:
Les fonctions implémentées sont: (similaire au test de personnalité habituel)
Masquez d'abord une partie de la page, puis affichez-la en cliquant sur la zone de radio.
Ensuite, donnez les commentaires en sélectionnant des options - (chaque option a des points différents)
Code de démonstration:
<Html> <A-Head> <Title> DISPONDATION DE LA TECHNOLOGIE DHTML --- Utilisation de Radio </Title> <Meta Http-Equiv = "Content-Type" Content = "Text / HTML; Charset = UTF-8" /> <style Type = "Text / CSS"> # ContentID {Display: None; / * show: Default Ciated * /} ul {/ * unRoesd Liste * / Background-Color: # 80FF00; / * Couleur d'arrière-plan * / Style de liste: Aucun; // Le point par défaut précédent annule la marge: 0px; // Patch externe} ul li {/ * Définir la couleur de la police de Li dans UL * / Color: # FF0000;}. Close {affichage: Aucune;}. Open {Affichage: Block;} </ STYLE> showContent (oradionode) {var odIvNode = document.getElementById ("ContentId"); if (oradionode.value == "Oui") {odIvNode.Style.display = "Block"; } else {odivnode.style.display = "non";} // la deuxième voie: utilisez avec / * avec (odivnode.style) {if (oradionode.value == "oui") {display = "block";} else {affichet = "nul";}} * / ath document.getElementsByName ("nol"); var val = 0; // non défini s'il est utilisé comme type booléen est false // alert (val); pour (var x = 0; x <onolradionodes.length; x ++) {// trouver la boîte de radio sélectionnée if (onolradionodes [x] .Checked) {val = parseInt (onolradionodes [x] .value); break;}} if (! val) {document.getElementyId ("erroinfo"). sélectionné ".fontColor (" Red "); return;} // Le message d'erreur est attribué à vide. 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";}} </cript> </ad> <pody> <v> Vous souhaitez participer au questionnaire? <br/> <! - Radio Radio Box Le nom est le même que mutuellement exclusif -> <entrée type = "radio" name = "wenjuan" value = "oui" onclick = "showContent (this)" /> oui <input type = "radio" name = "wenjuan" value = "non" onclick = "showcontent (this)" checked = "checked" /> non <br/> </ showconte id = "ContentID"> Recherche de contenu: <br/> Votre nom: <entrée type = "text" name = "name" /> <br/> Votre numéro de téléphone: <entrée type = "text" name = "tel" /> </ div> <hr /> <h2> Bienvenue pour participer au test de personnalité </h2> <h3> Question 1: </h3> <pan> </span> <ul id = "nolul"> <li> <entrée type = "radio" name = "nol" value = "1" /> Grape </li> <li> <entrée type = "radio" name = "nol" value = "2" /> watermelon </li> <li> <intrut type = "radio" name = "nol" value = "3" /> Apple </li> <li> <li> <pulny type = "NOL" Value = "3" /> pomme Value = "4" /> mango </li> <li> <entrée type = "radio" name = "nol" value = "5" /> Cherry </li> </ul> <v> <entrée type = "Button" value = "Voir les résultats du test" onClick = "showResult ()"> <spann id = "erroinfo"> </spande> <div id = "res_1"> 1-3 points: votre personnalité, vous suggérez. . . </div> <div id = "res_2"> Au-dessus de 4 points: Votre personnalité est extravertie, suggestion. . . </div> </div> </ body> </html>360 Résultats de démonstration du navigateur 8.1:
La page au début:
Sélectionnez "Oui" dans la zone de radio:
Conseils lorsque vous ne sélectionnez pas les fruits:
Conseils lors de la sélection des fruits:
Liste déroulante:
Code de démonstration simple:
<Html> <A-Head> <Title> Démonstration de la technologie DHTML --- Utilisation de Select </ Title> <Meta Http-Equiv = "Content-Type" Content = "Text / Html; Charset = UTF-8"> <Style type = "text / css">. clrclass {hauteur: 50px; width: 50px; float: gauche; / * float * / margin-right: 30px; margin-boot: 20px; / * inférieur-external patch * /} #text {Clear: Left; / * float ne peut pas flotter sur la gauche * /} </ style> <script type = "Text / javascript" odicclrNode) {// Obtenez l'objet couleur à définir var colombal = odicclrnode.style.backgroundcolor; // alert (colorVal); // définit la couleur de la police document.getElementById ("text"). Style.Color = ColorVal;} Fonction ChangeColor2 () {// alert ("aabb"); = document.getElementsByName ("selectColor") [0]; var coroptionNodes = oselectNode.options; // Options Obtenez la collection des objets d'option dans l'objet Select. // pour (var x = 0; x <colloptionNodes.length; x ++) {// alert (ColoptionNodes [x] .InnerHtml); //} // Travel It. // Option sélectionnée // alert (ColoptionNodes [OselectNode.SelectedIndex] .InnerHtml); var ColorVar = ColoptionNodes [OselectNode.SelectedIndex] .Value; Document.getElementById ("Text"). Style.Color = ColorVar;} Fonction ChangeColor3 () {var OSELECTNODODE = Document.getElementsByName ("selectColor") [1]; var coroptionNodes = oselectNode.options; var colorvar = coroptionNodes [OselectNode.SelectedIndex] .Value; document.getElementById ("text"). style.color = Colorvar;} </cript> </head> style = "background-color: noir" onclick = "changEColor (this)"> </div> <div id = "clr1" style = "background-Color: red" onclick = "changeColor (this)"> </v> <div id = "clr2" style = "background-color: green" onclick = "changecolor (this)"> </v> <div id = "Clr3" style = "background-Color: bleu" 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 Effet text <br/> Show Effet text <br/> Show Effect Texte <br/> </ div> <hr /> <! - // Dans cet exemple, il n'est pas approprié d'enregistrer un événement onClick pour sélectionner, car <select name = "selectColor" onClick = "changecolor2 ()"> -> <br/> <sélectionn name = "selectColor" onChange = "ChangEcolor2 ()"> <option value = "Black"> - SELECT COLOR - </ 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 ()"> <! 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 Résultats de démonstration du navigateur 8.1:
Cette boîte déroulante est expliquée par des mots.
La boîte déroulante ci-dessous utilise directement la couleur pour indiquer pourquoi le texte est défini
Liste déroulante renforcée - Menu de lien secondaire - Démonstration de code:
La fonction implémentée consiste à déterminer l'affichage du deuxième menu en fonction des options du premier menu.
<Html> <A-Head> <Title> Démonstration de la technologie DHTML ---- Utilisation de Select - Selectary Link Menu </ Title> <Meta Http-Equiv = "Content-Type" Content = "Text / HTML; Charset = UTF-8" /> <Script Type = "TMED / Javascript"> Function SelectCity () {// Json: Collection ", et les données proviendront de l'arrière-plan var cololProvices = {" Beijing ": ['Haidian District', 'Dongcheng District', 'Xicheng District', 'Chaoyang District']," Zhejiang ": [" Hangzhou ', "Hunan": "Jinhua", "Wenzhou"], "Hunan": ['Yiyang', 'changsha', 'zhuzhou', 'xiangtan'], "jiangxi": ['nanchang', 'jiujiang', 'pingxiang', 'shangrao']}; // {} Ceci est utilisé pour stocker: la valeur, la valeur peut être de type de type (un plateau peut être), [] // alerte (collProvices ["Beijing"] [2]); // District Xicheng // Obtenez l'ensemble de la ville de subordonnée à la province sélectionnée par l'utilisateur var oselnode = document.getElementByid ("Selid"); var index = Oselnode.SelectedIndex; // quel élément est sélectionné, renvoie le nombre var provisionName = OSELNODE.OPTIONS [INDEX). ValueVar Artcities = CollProvices [ProviCename]; // Obtenez le tableau de la ville de la province sélectionnée var OSUBSELNODE = document.getElementyid ("SubSelid"); // Obtenez la deuxième liste de liste déroulante // Effacer le contenu d'origine dans le menu déroulant "Sous-Souslid" // Notez qu'après la suppression du tableau précédent, la longueur est automatique x = 1; x <OSUBSELNODE.OPTIONS.Length;) {// Notez qu'après la suppression du tableau, la longueur est automatiquement mise à jour, donc n'utilisez pas "x ++" pour corriger pour la dernière fois // OSUBSELNODE.Removechild (OSUBSELNODE.OPTIONS [x]); //} // OUBSELNODE.Legth et Osubsel OSUBSELNODE [X] et OSUBSELNODE.OPTIONS [X] // Méthode 2--Removechild à partir du dos // for (var x = OSUBSELNODE.LENGTH-1; X> = 1; x -) {// OSUBSELNODE.Removechild (OSUBSELNODE [x]); //} // Méthode 3-Suppose attribue directement OSUBSEL OSUBSELNODE.LENGTH.length = 1; // définir la longueur sur 1, puis les options restantes seront supprimées automatiquement // ajouter chaque élément de la collection de la ville au menu déroulant "subselid" pour (var x = 0; x <artcities.length; x ++) {var optionNode = document.CreateElement ("option"); optionNode.InnerHtml = Artities [x]; // optionNode.value = ... [x]; // Développement formel, il devrait y avoir une valeur correspondant à cette option à attribuer, donc nous l'omettre ici. OSUBSELNODE.APPENDCHILD (OptionNode);}} </cript> </ad> <body> <sélectionnez id = "Selid" onChange = "SelectCity ()"> <Option> - Sélectionner la province - </ option> <option Value = "Beijing"> Beijing </ Option> <Option Value = "Hunan"> Hunan </ option> <Option <option value = "zhejiang"> zhejiang </ option> <option value = "jiangxi"> jiangxi </ option> </lect> <select id = "subSelid"> <option> - Sélectionner la ville - </ option> </lect> </ body> </html>360 Résultats de démonstration du navigateur 8.1:
Ajouter et supprimer les pièces jointes pour les composants de fichier
Il n'y a pas de fonction pour contacter l'arrière-plan, apprenez simplement la technologie en HTML
Code de démonstration:
<Html> <A-Head> <Title> DHTML Technology-File Component-ADD et Delete Piévaluations </Title> <Meta Http-Equiv = "Content-Type" Content = "Text / HTML; charSet = UTF-8" /> <style Type = "Text / CSS"> / * A: lien Le HyperLink n'est pas cliqué. R: Statut visité après avoir été accessible. R: Roquer le curseur se déplace vers l'état de l'hyperlien (non cliqué). R: Active l'état lorsque vous cliquez sur l'hyperlien. Utiliser l'ordre: lvha * / tableau A: lien, tableau A: visité, img {text-décoration: aucun; / * récupérer ou définir la décoration du texte dans l'objet. Text-Decoration: Aucun: valeur par défaut. Pas de clignotement décoratif: clignotement sous la ligne: sous-traitant: via la ligne Overline: Overline * / Color: # 0000FF;} Table OFILETABENODODE.Insertrow (); // insertrow Créez une nouvelle ligne (tr) dans le tableau et ajoutez la collection Rows. var otdnodefile = otrnode.insertCell (); // insertCell Créer une nouvelle cellule dans la ligne de table (TR) et ajouter la cellule à la collection de cellules. otdnodefile.innerhtml = "<input type = 'file' />"; var otdNodedel = otrnode.insertCell (); // Utiliser Text // otdnodedel.innerhtml = "<a href = 'javascrip Image --- Trouvez une image vous-même et nommez-la a.jpg-ou modifiez le code otdnodedel.innerhtml = "<img src = 'a.jpg' alt = 'delete jattment' onClick = 'DeleteFile (this)' />";} function DeleteFile (oanode) {// Un nœud parent de tag est TD, et TD Node parent est tr. var otrnodedel = oanode.parentnode.parentnode; // trotrnodedel.parentnode.removechild (otrnodedel);} </cript> </ad> <body> <table id = "filetable"> <tr> <th> <a href = "javascript: void (0)" onClick = "addfile ()" Pièce jointe </a> </th> </tr> <! --- Appuyez sur le bouton pour ajouter des pièces jointes, alors n'utilisez pas HTML, écrivez dans JavaScript <Tr> <Td> <Input Type = "File" /> </ Td> <Td> <a href = "Javascript: Void (0)" OnClick = "DeleteFile (this)"> Delete Sett </ table> </ body> </html>360 Résultats de démonstration du navigateur 8.1:
Supprimer la deuxième ligne tr:
Ce qui précède est les connaissances pertinentes sur l'ajout d'effets de fichiers basés sur JavaScript basés sur JavaScript à vous. J'espère que cela vous sera utile. Si vous voulez en savoir plus, veuillez faire attention à wulin.com!