CSS section:
*{
margin:0;
padding:0;
}
#ziku {width:600px;height:500px;border:1px solid gold;margin:0 auto;}
#wb {width:600px;height:450px;border:1px solid #f40; margin:0 Auto;}
#text {margin-left:100px;height:30px;width:200px;display:block;margin-top:10px;float:left;}
#btn {margin-left:20px;height:30px;width:100px;display:block;margin-top:10px;float:left;}
#ret {margin-left:20px;height:30px;width:100px;display:block;margin-top:10px;float:left;}
Structure part:
<form>
<div id= "Ziku" >
<div id= "WB" >
Blog Park was founded in January 2004, the blog Garden was born in Yangzhou, Jiangsu Province, such a very backward small city, the city is small, but here there are many creative people, the reason for the birth of the blog is so simple.
</div>
<input type= "text" name= "text" id= "text" value= ""/>
<input type= "button" Name= "btn" id= "btn" value= "Search"/>
<input type= "reset" name= "ret" id= "ret" value= "reset"/>
</div>
</form>
JS section:
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;
}
}
Use JavaScript string manipulation for simple word search