บทความนี้อธิบายวิธีการของ JS+CSS เพื่อใช้ช่องค้นหา Sina Weibo แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังนี้: <! 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">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> JS+CSS เลียนแบบเอฟเฟกต์คล้ายกับ Sina Weibo Search Box </title>
<style type = "text/css">
* {padding: 0; มาร์จิ้น: 0;}
ร่างกาย {ขนาดตัวอักษร: 14px; -
#Box {WIDTH: 600PX; มาร์จิ้น: 40px auto;}
#in {width: 240px; ความสูง: 24px; ความสูงของสาย: 24px; ชายแดน: 1px Solid Border-Radius: 4px; Box-Shadow: Inset 0 0 2px; -
#suggest {display: none; ตำแหน่ง: ญาติ; ระยะขอบด้านบน: -1px; ความกว้าง: 240px; Padding-Top: 1px; ชายแดน: 1px เส้นขอบทึบด้านบน: 0 ไม่มี;
แนวชายแดน: 4px; Box-Shadow: Inset 0 0 2px; ล้น: ซ่อน; -
#suggest A {display: block; สี:#f00; ความสูง: 24px; ความสูงของสาย: 24px; การตกแต่งข้อความ: ไม่มี; Padding: 0 4px;}
#suggest A: Hover {background: #EEE;}
#SUGSUT BEST A Span {Color#369;}
</style>
<script type = "text/javascript">
window.onload = function () {
// ประกาศตัวแปรมากมายสำหรับใช้ด้านล่าง
var obox = document.getElementById ("Box");
obj = document.getElementById ("in");
osug = document.getElementById ("แนะนำ");
OA = osug.getElementsByTagname ("span");
// เข้ากันได้กับเบราว์เซอร์ IE และ Firefox แต่หลังจากการทดสอบพบว่า IE678 สามารถเป็น IE9 แต่ไม่สามารถเรียกใช้เมื่อถูกลบ ฉันตรวจสอบออนไลน์และบอกว่ามีปัญหากับ IE9
obj.oninput = obj.onPropertyChange = onChange;
ฟังก์ชั่น onchange () {
var txt = this.value;
var words = txt.length;
ถ้า (คำ == 0) {
osug.style.display = "ไม่มี";
} อื่นถ้า (คำ <= 8) {
osug.style.display = "block";
สำหรับ (var i = 0; len = oa.length, i <len; i ++) {
oa [i] .innerhtml = txt;
-
} อื่นถ้า (คำ> 8) {
osug.style.display = "block";
var limit = txt.substring (0,8)+"... ";
สำหรับ (var i = 0; len = oa.length, i <len; i ++) {
OA [i] .innerhtml = ขีด จำกัด ;
-
-
-
-
ฟังก์ชั่น disbox () {
document.getElementById ("แนะนำ"). style.display = "ไม่มี";
-
</script>
</head>
<body>
<dl id = "box">
<dt> <อินพุต onblur = "disbox ()" type = "text" name = "" id = "in" /> </dt>
<dd id = "แนะนำ">
<a href = "###"> ค้นหา "<span> </span>" Weibo ที่เกี่ยวข้อง </a>
<a href = "###"> ค้นหา "<span> </span>" ผู้ใช้ที่เกี่ยวข้อง </a>
</dd>
</dl>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน