이 기사에서는 Sina Weibo 검색 상자를 구현하기위한 JS+CSS의 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml"xml : lang = "en">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> JS+CSS는 Sina Weibo Search Box와 유사한 효과를 모방합니다. </title>
<스타일 유형 = "텍스트/CSS">
* {패딩 : 0; 여백 : 0;}
바디 {글꼴 크기 : 14px; }
#box {너비 : 600px; 여백 : 40px Auto;}
#in {너비 : 240px; 높이 : 24px; 라인 높이 : 24px; 테두리 : 1px 솔리드 테두리-라디우스 : 4px; Box-Shadow : 삽입 0 0 2px; }
#suggest {display : 없음; 위치 : 상대; 마진-탑 : -1px; 너비 : 240px; 패딩 탑 : 1px; 테두리 : 1px 솔리드 테두리 탑 : 0 없음;
Border-Radius : 4px; Box-Shadow : 삽입 0 0 2px; 오버플로 : 숨겨진; }
#suggest a {display : block; 색상 :#F00; 높이 : 24px; 라인 높이 : 24px; 텍스트 결정 : 없음; 패딩 : 0 4px;}
#suggest a : 호버 {배경 : #eee;}
#SUGGEST A SPAN {Color#369;}
</스타일>
<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;
if (words == 0) {
osug.style.display = "none";
} else if (단어 <= 8) {
osug.style.display = "블록";
for (var i = 0; len = oa.length, i <len; i ++) {
OA [i] .innerhtml = txt;
}
} else if (단어> 8) {
osug.style.display = "블록";
var limit = txt.substring (0,8)+"...";
for (var i = 0; len = oa.length, i <len; i ++) {
OA [i] .innerhtml = 한계;
}
}
}
}
함수 disbox () {
document.getElementById ( "proply"). style.display = "none";
}
</스크립트>
</head>
<body>
<dl id = "box">
<dt> <input 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 프로그래밍에 도움이되기를 바랍니다.