Artikel ini menjelaskan metode JS+CSS untuk mengimplementasikan kotak pencarian SINA WEIBO. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> js+css meniru efeknya yang mirip dengan kotak pencarian Sina Weibo </iteme>
<type style = "text/css">
* {padding: 0; margin: 0;}
body {font-size: 14px; }
#box {width: 600px; margin: 40px auto;}
#in {width: 240px; Tinggi: 24px; Line-Height: 24px; Perbatasan: 1px Solid Border-Radius: 4px; Kotak-Shadow: Inset 0 0 2px; }
#suggest {display: none; Posisi: kerabat; margin-top: -1px; Lebar: 240px; Padding-top: 1px; BORDER: 1px Solid Border-Top: 0 Tidak Ada;
Border-Radius: 4px; Kotak-Shadow: Inset 0 0 2px; meluap: tersembunyi; }
#suggest a {display: block; Warna:#F00; Tinggi: 24px; Line-Height: 24px; Dekorasi Teks: Tidak Ada; padding: 0 4px;}
#suggest A: Hover {latar belakang: #eee;}
#sugbest span {Color#369;}
</tyle>
<type skrip = "Teks/JavaScript">
window.onload = function () {
// Nyatakan banyak variabel untuk digunakan di bawah ini
var obox = document.getElementById ("box");
obj = document.getElementById ("in");
osug = document.getElementById ("saran");
oa = osug.getElementsbyTagname ("span");
// Kompatibel dengan peramban IE dan Firefox, tetapi setelah pengujian, ditemukan bahwa IE678 dapat IE9 tetapi tidak dapat dipicu saat dihapus. Saya memeriksa secara online dan mengatakan bahwa ada masalah dengan IE9.
obj.oninput = obj.onpropertychange = onchange;
fungsi onchange () {
var txt = this.value;
var words = txt.length;
if (words == 0) {
osug.style.display = "none";
} lain jika (kata <= 8) {
osug.style.display = "block";
untuk (var i = 0; len = oa.length, i <len; i ++) {
oa [i] .innerhtml = txt;
}
} lain jika (kata> 8) {
osug.style.display = "block";
var limit = txt.substring (0,8)+"...";
untuk (var i = 0; len = oa.length, i <len; i ++) {
oa [i] .innerhtml = batas;
}
}
}
}
function disbox () {
document.geteLementById ("saran"). style.display = "none";
}
</script>
</head>
<body>
<dl id = "box">
<dt> <input onblur = "disbox ()" type = "text" name = "" id = "in" /> </dt>
<dd id = "saran">
<a href = "###"> Cari "<span> </span>" Weibo terkait </a>
<a href = "###"> Cari untuk "<span> </span>" pengguna terkait </a>
</dd>
</ll>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.