Este artículo describe el método de JS+CSS para implementar el cuadro de búsqueda Sina Weibo. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 transitional.dtd"> ">
<html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> JS+CSS imita el efecto similar al cuadro de búsqueda Sina Weibo </title>
<style type = "text/css">
* {relleno: 0; margen: 0;}
cuerpo {Font-size: 14px; }
#box {ancho: 600px; Margen: 40px Auto;}
#in {ancho: 240px; Altura: 24px; Línea-aguja: 24px; borde: 1px de borde sólido-radio: 4px; shadow de caja: recuadro 0 0 2px; }
#Suggest {Display: None; Posición: relativo; margen-top: -1px; Ancho: 240px; almohadilla: 1px; borde: 1px sólido borde-top: 0 ninguno;
Border-Radius: 4px; shadow de caja: recuadro 0 0 2px; desbordamiento: oculto; }
#suggest a {Display: Block; Color:#F00; Altura: 24px; Línea-aguja: 24px; Decoración de texto: ninguna; relleno: 0 4px;}
#Suggest A: Hover {Background: #EEE;}
#suggest A span {Color#369;}
</style>
<script type = "text/javaScript">
window.onload = function () {
// declara un montón de variables para usar a continuación
var obox = document.getElementById ("box");
obj = document.getElementById ("in");
osug = document.getElementById ("sugerir");
oa = osug.getElementsBytagName ("Span");
// Compatible con los navegadores IE y Firefox, pero después de las pruebas, se descubrió que IE678 puede ser IE9 pero no se puede activar cuando se elimina. Revisé en línea y dije que hay un problema con IE9.
obj.oninput = obj.onpropertychange = onchange;
función onchange () {
var txt = this.Value;
Var Words = txt.length;
if (palabras == 0) {
osug.style.display = "Ninguno";
} else if (palabras <= 8) {
osug.style.display = "bloque";
para (var i = 0; len = oa.length, i <len; i ++) {
oa [i] .innerhtml = txt;
}
} else if (palabras> 8) {
osug.style.display = "bloque";
Var limit = txt.substring (0,8)+"...";
para (var i = 0; len = oa.length, i <len; i ++) {
oa [i] .innerhtml = limit;
}
}
}
}
function disbox () {
document.getElementById ("sugerir"). style.display = "none";
}
</script>
</ablo>
<Body>
<dl id = "box">
<dt> <input onblur = "disbox ()" type = "text" name = "" id = "in" /> </dt>
<dd id = "sugerir">
<a href = "###"> Buscar "<span> </span>" Weibo relacionado </a>
<a href = "###"> Buscar "<span> </span>" usuarios relacionados </a>
</dd>
</dl>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.