Red de conocimiento informático - Aprendizaje de programación - HTML concatena las cadenas en el cuadro de entrada para generar una URL y obtener información de devolución de acceso.

HTML concatena las cadenas en el cuadro de entrada para generar una URL y obtener información de devolución de acceso.

1. Coloque el código directamente en un archivo .html, descargue un js, asígnele el nombre jquery-1.7.2.min.js y colóquelo en el mismo directorio.

2. El efecto después del código es como se muestra en la figura

3. Esta respuesta es solo como referencia, si no te gusta, no comentes.

************ **************** Comienza la siguiente sección de código********** *******************

Empalme de cadenas para devolver la dirección URL </title& gt;</p><p><style></p><p> /**Estilo de inicialización****</p><p> *{margin: 0 ;padding:0;}</p><p> /***Borrar estilo flotante****</p><p> .clc{clear:both;}</p><p> /*** El texto está centrado***/ </p><p> .txtcenter{text-align:center;}</p><p> </p><p> .url_content{width:70%;margin:20px auto }</p><p> .c_input,.c_btn,.c_show{overflow :hidden;}</p><p> </p><p> .ci_left,.ci_right{float:left;min-height : 200px;borde:1px sólido #AEAEAE;}</p><p> .ci_left{ancho:40%;}</p><p> .ci_right{margin-left:1%;ancho:58%;fondo : #E7E7E7;}</p><p> </p><p> .cil_unit{ancho:70%;margin:20px auto;overflow:hidden;}</p><p> .inp_txt,.cil_input{ float :left;}</p><p> .inp_txt{color:#30C0FF;height:30px;margin-top:5px;width:100px;}</p><p> .cil_input{height:30px ; : 180px;radio-borde:5px;borde:1px sólido #CFCFCF;}</p><p> </p><p> .btn_1,.btn_2,.btn_3{float:left;width:18%;margin : 20px 5%; 45px; altura de línea: 45px; margen: 20px automático; tamaño de fuente: 18px; desbordamiento: oculto;}</p><p> .c_red{color:rojo;}</p><p> .c_green{color:verde;}</p><p> .></style></p><p><! --Introducción a jq --></p><p><script src='jquery-1.7.2.min.js'></script></p><p></head></p> <p><body></p><p> <div class='url_content'> ?<div class='c_input'> ? <div class='ci_left'> ?<div class='ci_unit'></p><p>? <div class='inp_txt'>Dirección del servidor:</div> ? <input class='cil_input serveraddr' type='text' placeholder='Ingrese la dirección del servidor' /> ?</div> ? ='cil_unit'> ? <div class='inp_txt'>Número de identificación: </div> ? <input class='cil_input idaccount' type='text' placeholder='Ingrese ID' /> ?</ div> ? <div class='cil_unit'> ? <div class='inp_txt'>Elemento de configuración: </div> ? <input class='cil_input setvalue' type='text' placeholder='Ingrese el elemento de configuración ' /> ? </div> </div> ? <div class='ci_right'> ? <p>Resultado devuelto: </p> ? <p class='txtcenter result'>El resultado devuelto se muestra aquí</p> ? </div> ? </div> ? <div class='clc'></div> ? <div class='c_btn'> ? <div class='btn_1 txtcenter'>función1 (función1)</div> ? <div class='btn_2 txtcenter'>función2 (función2)</div> ? <div class='btn_3 txtcenter'>función3 (función3)</div> ?</div> <div class=' clc'>< /div> ? <div class='c_show'> ?<div class='cs_f'><p>El efecto de hacer clic en el botón función1 es: :222</span>/<span class='c_green'> función1< /span>.do?info={"A":"<span class='c_red'>yyyy</span>", "B":"333<span class='c_green'>funciton1</span> ", "C":"<span class='c_red'>.zz</span>"}<p></div> ?<div class='cs_f'><p>El efecto de hacer clic en el botón de función 2 es: :222</span>/<span class='c_green'>función2</span>.do?info={"A":"<span class='c_red'>yyyy</span&g</p><p>t;", "B":"333<span class='c_green'>funciton2</span>"}<p></div> ? </div></p><p> </div></ p><p> </p><p> <script></p><p> ?función cambiarContenido(bandera){ var inp1 = $.trim($(".serveraddr").val()) ;/ /dirección del servidor var inp2 = $.trim($(".idaccount").val()) ;//ID ?var inp3 = $.trim($(".setvalue").val()) ;//set ?if( flag=="1"){ ?var content = "http://"+inp1+"/function1.do?info={'A':'"+inp2+"','B':'333function1' ,'C':'"+inp3+"'}"; ?} else if(flag=="2"){ ?var contenido = "http://"+inp1+"/function2.do?info={'A ':'"+inp2+"','B':'333function2'}"; ?} ?$(".resultado).html(contenido);?} ?$(".btn_1").click(función( ){/Activador de clic del botón de función 1 ?changeContent("1"); ?$(".btn_2").click(function(){/Activador de clic del botón de función 1 ?changeContent("2"); ?}) ?</p><p> </script></p><p> </p><p></body></p><p></html></p><p>****************************** Lo anterior es el código partend*************** **** * **********</p></div> </div> <div class="nextinfo"><a href="ff9ez7agc8.html">上篇: Utilice jquery para implementar el menú de segundo nivel. Haga clic en el menú de primer nivel y el menú de segundo nivel se desliza y desaparece.</a> <a href="ff9mg77u6h.html">下篇: No.49 Información de la tarjeta del pájaro chirriante de la suerte del pájaro secreto</a></div> </div> </div> <div class="aside l_box"> <div class="sidebar diyModule"> <div class="side-title"><h3 class="function_t">Artículos populares</h3></div> <ul><li><a href="x2989crejf.html">Push directo del teléfono móvil Hd650</a></li><li><a href="d64jskr2sb.html">La cámara trasera del iPhone 6 muestra una pantalla negra y no puede tomar fotografías. La cámara frontal y el flash son buenos. ¿Cuál es la razón para ti? director medico</a></li><li><a href="fwqmd8z26z.html">La conexión del punto de acceso de decoración de la tienda Dreamweaver Taobao es confusa, dos puntos de acceso de área personalizados están mezclados, ¡por favor dame un consejo!</a></li><li><a href="43gpxh8o6c.html">¿Qué es el servidor nginx y qué es el proxy inverso?</a></li><li><a href="oufoudi54h.html">¿Restaurar macbook air a la configuración de fábrica?</a></li></ul> </div> </div> </div> <footer class="jz52bq footer_style"><p>copyright 2024 <a href="https://www.diannaozhishiwang.com/"><b>Red de conocimiento informático</b></a> All Rights Reserved.<script type="text/javascript" src="../css/tongji.js"></script></p></footer> </body> </html>