تصف هذه المقالة طريقة JS+CSS لتنفيذ مربع البحث Sina Weibo. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<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 </title>
<type type = "text/css">
* {padding: 0 ؛ الهامش: 0 ؛}
الجسم {font-size: 14px ؛ }
#box {width: 600px ؛ الهامش: 40 بكسل Auto ؛}
#{العرض: 240px ؛ الارتفاع: 24 بكسل ؛ Line-Leight: 24px ؛ الحدود: 1 بكسل الحدود الصلبة: 4 بكسل ؛ Box-Shadow: Inset 0 0 2px ؛ }
#suggest {display: none ؛ الموقف: قريب الهامش أعلى: -1px ؛ العرض: 240 بكسل ؛ حشو أعلى: 1 بكسل ؛ الحدود: 1 بكسل الصلب الحدود: 0 لا شيء ؛
الحدود الحدودية: 4px ؛ Box-Shadow: Inset 0 0 2px ؛ الفائض: مخفي. }
#suggest a {display: block ؛ اللون:#F00 ؛ الارتفاع: 24 بكسل ؛ Line-Leight: 24px ؛ تدمير النص: لا شيء ؛ الحشو: 0 4px ؛}
#Suggest A: Hover {Background: #EEE ؛}
#suggest a span {color#369 ؛}
</style>
<script type = "text/javaScript">
window.onload = function () {
// إعلان مجموعة من المتغيرات للاستخدام أدناه
var obox = document.getElementById ("box") ؛
obj = document.getElementById ("in") ؛
osug = document.getElementById ("اقتراح") ؛
الزراعة العضوية = osug.getElementSbyTagName ("span") ؛
// متوافق مع متصفحات IE و Firefox ، ولكن بعد الاختبار ، وجد أنه يمكن أن يكون IE678 IE9 ولكن لا يمكن تشغيله عند حذفه. راجعت عبر الإنترنت وقلت أن هناك مشكلة مع IE9.
OBJ.Oninput = obj.onpropertyChange = onChange ؛
وظيفة onChange () {
var txt = this.value ؛
كلمات var = txt.length ؛
إذا (الكلمات == 0) {
osug.style.display = "none" ؛
} آخر إذا (الكلمات <= 8) {
osug.style.display = "block" ؛
لـ (var i = 0 ؛ len = oa.length ، i <len ؛ i ++) {
الزراعة العضوية [i] .innerhtml = txt ؛
}
} آخر إذا (الكلمات> 8) {
osug.style.display = "block" ؛
var limit = txt.substring (0،8)+"..." ؛
لـ (var i = 0 ؛ len = oa.length ، i <len ؛ i ++) {
الزراعة العضوية [i] .innerhtml = limit ؛
}
}
}
}
دالة disbox () {
document.getElementById ("اقتراح"). style.display = "none" ؛
}
</script>
</head>
<body>
<dl id = "box">
<dt> <input onblur = "disbox ()" type = "text" name = "" id = "in" /> </dt>
<dd id = "اقتراح">
<a href = "###"
<a href = "###"
</dd>
</dl>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.