码迷,mamicode.com
首页 > 编程语言 > 详细

利用JavaScript的字符串操作实现简单查字

时间:2016-10-29 16:38:56      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:理由   play   博客   val   text   oat   for   部分   name   

css部分:

  *{

  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;}

结构部分:

<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 ;
                }
     }

 

利用JavaScript的字符串操作实现简单查字

标签:理由   play   博客   val   text   oat   for   部分   name   

原文地址:http://www.cnblogs.com/yanglei9308/p/6011161.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!