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


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

  • 相关阅读:
    CSS属性中Display与Visibility的不同
    11
    【零基础学习iOS开发】【01-前言】01-开篇
    C#计算时间差。
    C++拷贝构造函数:浅拷贝与深拷贝
    C++:string操作函数
    文件输入输出(二):文件的操作
    文件输入输出(一):重定向
    Java中的StringBuffer
    C++中setiosflags()的用法
  • 原文地址:https://www.cnblogs.com/yanglei9308/p/6011161.html
Copyright © 2020-2023  润新知