css部分:
*{
margin: 0;
padding: 0;
}
#ziku{ 600px;height: 500px;border: 1px solid gold;margin: 0 auto;}
#wb{ 600px;height: 450px;border: 1px solid #f40;margin: 0 auto;}
#text{margin-left: 100px;height: 30px; 200px;display: block;margin-top: 10px;float: left;}
#btn{margin-left: 20px;height: 30px; 100px;display: block;margin-top: 10px;float: left;}
#ret{margin-left: 20px;height: 30px; 100px;display: block;margin-top: 10px;float: left;}
结构部分:
<form>
<div id="ziku">
<div id="wb">
博客园创建于2004年1月,博客园诞生于江苏扬州这样一个IT非常落后的小城市,城市虽小,但是这里却有很多求知创新的人,博客园诞生的理由是如此简单。
</div>
<input type="text" name="text" id="text" value="" />
<input type="button" name="btn" id="btn" value="搜索" />
<input type="reset" name="ret" id="ret" value="重置" />
</div>
</form>
js部分:
var oBtn= document.getElementById("btn");
var oText =document.getElementById("text");
var oWb = document.getElementById("wb");
var oZichuan = oWb.innerHTML;
oText.onfocus=function(){
onkeyup =function(){
jia (oText.value);
}
}
function jia(a){
if(a){
var arr = oZichuan.split(a)
oWb.innerHTML = arr.join( '<span style="color:red;background:gold;" >'+a+'</span>' ) ;
}else{
oWb.innerHTML = oZichuan ;
}
}