Esta seção descreve a implementação do menu de rádio/menu suspenso/adição de arquivos, síntese de CSS, HTML e JavaScript. Os detalhes específicos são os seguintes:
Caixa de rádio:
As funções implementadas são: (semelhante ao teste de personalidade usual)
Esconda primeiro uma parte da página e exiba -a clicando na caixa de rádio.
Em seguida, faça os comentários selecionando opções - (cada opção tem pontos diferentes)
Código de demonstração:
<html> <head> <title> demonstração da tecnologia DHTML --- Uso do rádio </itit> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <estilo typen = "text/css">#contentId {exibir: nenhum;/*show: show: Lista*/Background-Color:#80FF00;/*Cor de fundo*/estilo de lista: nenhum; // O ponto padrão anterior cancela a margem: 0px; // patch externo} ul li {/*defina a cor da fonte de li em ul*/cor:#ff0000;}. Close {Display: Nenhum;}. mostraContent (oradionode) {var odivNode = document.getElementById ("contentId"); if (oradionode.value == "sim") {odivnode.style.display = "bloco"; } else {odivnode.style.display = "None";} // A segunda maneira: use com/*com (odivnode.style) {if (oradionode.value == "sim") {display = "block";} else {exibir = "nenhum";}}*/} function ShowRes () (); document.getElementsByName ("nol"); var val = 0; // indefinido se usado como tipo booleano é falso // alert (val); para (var x = 0; x <onolradionodes.length; x ++) {// encontrando a caixa de rádio selecionada if (onolradionodes [x] .Checked) {val = parseInt (onolRadionodes [x] .value); quebra;}} if (! selecionado ".fontcolor (" vermelho "); retornar;} // A mensagem de erro é atribuída a ser vazia. 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> </ad Head> <body> <div> do Você quer participar do questionário? <br/> <!-O nome da caixa de rádio é o mesmo que mutuamente exclusivo-> <input type = "radio" name = "wenjuan" value = "sim" onclick = "showContent (this)"/> sim <input type = "radio" name = "wenjuan" value "" noClick = "não <br =" radio "" checking = "wenjuan" "noclick =" não <br = "radio" ". id = "contentId"> Pesquise Conteúdo: <br/> Seu nome: <input type = "text" name = "name"/> <br/> Seu número de telefone: <input type = "text" name = "tel"/> </div> <hr/> <h2> Bem -vindo para participar do teste de personalidade </h2> <h3> Pergunta 1: </h3> </span> <ul id = "nolul"> <li> <input type = "radio" name = "nol" value = "1"/> uva </li> <li> <input type = "radio" name = "nol" value = "2"/> watermelon </li> <li> <input type = "" name = "" nol " name = "nol" value = "4"/> manga </li> <li> <input type = "radio" name = "nol" value = "5"/> cereja </li> </ul> <div> <input type = "button" value = "Exibir resultados do teste" OnClick = "ShowResult ()"> <span od = "erroinfo" é introvertido, sugestão. . . </div> <div id = "res_2"> acima de 4 pontos: sua personalidade é extrovertida, sugestão. . . </div> </div> </body> </html>360 Browser 8.1 Resultados da demonstração:
A página no início:
Selecione "Sim" na caixa de rádio:
Dicas ao não selecionar frutas:
Dicas ao selecionar frutas:
Lista suspensa:
Código de demonstração simples:
<html> <head> <title> demonstração da tecnologia DHTML --- Uso de selecionar </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <estilo type = "text/css">. clrclass {altura: 50px; largura: 50px; flutuação: esquerda;*flutuante*/margem-right: 30px; margin-bottom: 20px;/*float inferior*/}/}/} #text {clear: esquerda; esquerda; ChanGecolor (OdicClrNode) {// Obtenha o objeto colorido a ser definido var com colorVal = Odicclrnode.style.backgroundColor; // alert (colorVal); // Defina a cor do document.getElementById ("text".) OSELECTNODE = Document.getElementsByName ("SelectColor") [0]; var colOptionNodes = OSelectNode.Options; // Opções Obtenha a coleta de objetos de opção no objeto Select. // for (var x = 0; x <colloptionnodes.length; x ++) {// alert (coloptionNodes [x] .innerhtml); //} // atravessar. // Opção selecionada // alerta (coloptionNodes [OSELECTNODE.SELECTECTINDIndex] .innerhtml); var colorvar = coloptionNodes [OSELECTNODE.SELECTECTINDINDEX] .Value; document.getElementById ("text"). Document.getElementsByName ("SelectColor") [1]; var colOptionNodes = oselectNode.options; var colorvar = coloptionNodes [OselectNode.SelectedIndex] .Value; Document.getElementById ("Text". style = "isto)"> </div> <div id = "clr1" style = "cor de fundo colorido: vermelho" onclick = "changeColor (this)"> </div> <div id = "clr2" style = "background color: verde" = "changecolor" "this)" " OnClick = "ChanGecolor (this)"> </div> <div id = "clr4" style = "cor de fundo:#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 Texto <br/> </div> <hr/> <!-// Neste exemplo, não é apropriado registrar um evento onclick para selecionar, porque <select name = "selectColor" onclick = "changeColor2 ()">-> <br/> <select name = "selectColor" onchange = "ChangeColor2 () <br/> value = "vermelho"> vermelho </pption> <option value = "verde"> verde </pption> <opção value = "azul"> azul </pption> <opção value = "#c0c0c0"> prate </pption> </select> <hr/> <Select Name = "SelectColor" OnChange = "Changor3 ()"> <! 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"> </pption> </leclect> </body> </html>360 Browser 8.1 Resultados da demonstração:
Esta caixa suspensa é explicada em palavras.
A caixa suspensa abaixo usa diretamente a cor para indicar por que o texto está definido
Lista suspensa fortalecida - Menu do link secundário - Demonstração de código:
A função implementada é determinar a exibição do segundo menu com base nas opções do primeiro menu.
<html> <head> <title> demonstração da tecnologia DHTML ---- Uso de selecionar-Menu do link secundário </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script type = "text/javscript"> functionCity (): 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 // alerta (CollProvices ["Pequim"] [2]); // Distrito de Xicheng // Obtenha o conjunto de subordinados da cidade à província selecionada pelo usuário var oselnode = document.getElementById ("SelId"); var index = Oselnode.selectedIndIndEx; 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;) {// Observe que, após a exclusão da matriz, o comprimento é atualizado automaticamente, portanto, não use "x ++" para corrigir a última vez // Osubselnode.removechild (OsubselNode.Options [x]); osubselNode [x] e osubselNode.options [x] // Método 2--RemoveChild a partir da parte traseira // para (var x = osubselnode.length-1; x> = 1; x-) {// OsubselNode.RemoveChild (OsubselNode [x]); osubselNode.length.length = 1; // Defina o comprimento para 1, as opções restantes serão excluídas automaticamente // Adicione cada elemento na coleção da cidade ao menu suspenso "subselID" para (var x = 0; x <arnCities.length; x ++) {var optionNode = document.createElement ("opção"); OptionNode.innerhtml = arrcities [x]; // optionNode.value = ... [x]; // Desenvolvimento formal, deve haver um valor correspondente a esta opção a ser atribuído, por isso omitimos aqui. osubselNode.appendChild (optionNode);}} </sCript> </ad Head> <body> <select id = "Selid" onchange = "selectCity ()"> <pution>-selecione Província-</pption> <opção Value = "Pequim"> Pequim </Option> <opção ("hunan"> hunan </hunan </"BEIJING"> BEIJING </option> <opção = "hunan"> hunan </hunan </"hunan =" BEIJING "> BEIJING </option> <opção =" hunan "> hunan <inan> </hunan </beijing"> </option> <pution) value = "zhejiang"> zhejiang </pption> <opção value = "jiangxi"> jiangxi </option> </leclect> <select id = "subselId"> <pption>-selecione City-</pption> </leclect> </body> </html>360 Browser 8.1 Resultados da demonstração:
Adicionar e excluir anexos para componentes de arquivo
Não há função para entrar em contato com o plano de fundo, apenas aprenda a tecnologia em html
Código de demonstração:
<html> <head> <title> DHTML Componente-ADD-ADD e Excluir anexos </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <estilo "text/css">/*a: link o hiperlink é. R: Status visitado após ser acessado. R: Passe o cursor se move para o status no hiperlink (não clicado). A: ativo o status ao clicar no hiperlink. Use Ordem: Lvha*/Tabela A: Link, Tabela A: Visitada, IMG {Text-Decoration: Nenhum;/* Recupere ou defina a decoração do texto no objeto. Decoração de texto: Nenhum: Valor padrão. Sem piscar decorativo: piscar sublinhado: sublinhado: através da linha Overline: Overline*/cor:#0000FF;} Tabela A: Hover {color:#ff0000;} </style> <script type = "text/javascript"> function addfile () {var ofiletablenode = document.getById (filetById " OFILETABLENODE.INSERTROW (); // Insertrow Crie uma nova linha (TR) na tabela e adicione a coleção de linhas. var otdNodeFile = otrnode.insertCell (); // InsertCell Crie uma nova célula na linha da tabela (TR) e adicione a célula à coleção de células. otdnodefile.innerhtml = "<input type = 'file'/>"; var otdnodedel = otrnode.insertCell (); // use text // otdnodedel.innerhtml = "<a href = 'javascript: void (0)',; Imagem --- Encontre uma imagem você mesmo e nomeie-a a.jpg-ou altere o código otdnodedel.innerhtml = "<img src = 'a.jpg' alt = 'delete anexamento' onclick = 'exclickefile (this)'/>";} function e oanode) var otrnodedel = oanode.parentnode.parentnode; // trotrnodedel.parentnode.removechild (otrnodedel);} </script> </adfge> <body> <tabela id = "filetable"> <tr> <h> <a href = "javroscrint::", ""> </script> </head> <body> <tabela <tabela = "filetable"> <tr> <h> <a href = "javscrint":: " Anexo </a> </th> </tr> <! --- Toque no botão para adicionar anexos; portanto, não use html, escreva em javascript <tr> <td> <input type = "file"/> </td> <td> <a href = "javascript: void (0)" onClick = "Deletefile (this) </tabela> </body> </html>360 Browser 8.1 Resultados da demonstração:
Exclua a segunda linha TR:
O exposto acima é o conhecimento relevante sobre a adição de efeitos de arquivo com base no JavaScript com base no JavaScript a você. Espero que seja útil para você. Se você quiser saber mais, preste atenção ao wulin.com!