投稿
  1. 云图网首页
  2. 技术专区
  3. 智能运维

js仿记事本查找div里的内容

• 智能运维 • 阅读 41 


 
<!--前台-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>聊天記錄</title>
    <link href="ListenChat.css" rel="stylesheet" />
    <script src="jquery.min.js"></script>
    <script src="ListenChat.js"></script>
</head>
<body>
    <form id="form1" runat="server">
     <div class="sear_menu_bg">
        <div class="hunt_for">
           <div class="hunt_left"></div>
           <div class="hunt_center">
              內容:<input type="text" id="txtSearchContent"  value=""  />   
           </div>
         <div class="hunt_right"></div>
        </div>
         <a class="affirm_bg" onclick="window.close();">
            <span class="affirm_left_bg"></span>
            <span class="affirm_center_bg">關閉</span>
            <span class="affirm_right_bg"></span>
        </a>
         <a class="affirm_bg btnDown" href="#">
            <span class="affirm_left_bg"></span>
            <span class="affirm_center_bg">下一個</span>
            <span class="affirm_right_bg"></span>
        </a>
         <a class="affirm_bg btnUp" href="#">
            <span class="affirm_left_bg"></span>
            <span class="affirm_center_bg">上一個</span>
            <span class="affirm_right_bg"></span>
        </a>
        <a class="affirm_bg searchbtn" href="#">
            <span class="affirm_left_bg"></span>
            <span class="affirm_center_bg">查找</span>
            <span class="affirm_right_bg"></span>
        </a>
         
         
         
    </div><!--/*.sear_menu_bg/-->
        <div class="content_win">
              <ul class="con_main">
         
              </ul>
        </div>
    </form>
</body>
</html>

<!--JS文件ListenChat.js-->
window.onload = function () {
    getLsMsg();
    var arrContents = [];//储存查找的html的数组
    var arrIndex;//需要查询的数组索引
    //查找
    $(".searchbtn").click(function () {
        var content = $("#txtSearchContent").val();
        if (content != "") {
            //還原b標籤
            $(".MessageClass b").each(function () {
                var sbefore = $(this).html();
                $(this).replaceWith(sbefore);
            });
            //移除searchID屬性
            $(".MessageClass").removeAttr("searchId");
            arrContents.length = 0;
            arrIndex = 1;
            var shtml = $(".MessageClass:contains('" + content + "')");
            shtml.each(function (i) {
                $(this).attr("searchId", i)
                arrContents.push($(this).html());
            });
            if (shtml.html()) {
                $(".MessageClass[searchId='0']").html($(".MessageClass[searchId='0']").html().replace(content, "<b style='color:blue'>" + content + "</b>"));
                if ($(".content_win").length > 0) {
                    $(".content_win").scrollTop($(".MessageClass[searchId='0']")[0].parentNode.parentNode.parentNode.offsetTop - $(".MessageClass[searchId='0']").parent().parent().parent().height());
                }
            }
        }
    });
    //下一个
    $(".btnDown").click(function () {
        var content = $("#txtSearchContent").val();
        if (content != "") {
            $(".MessageClass b").each(function () {
                var sbefore = $(this).html();
                $(this).replaceWith(sbefore);
            });
            if (arrContents.length > arrIndex) {
                $(".MessageClass[searchId='" + arrIndex + "']").html($(".MessageClass[searchId='" + arrIndex + "']").html().replace(content, "<b style='color:blue'>" + content + "</b>"));
                if ($(".content_win").length > 0) {
                    $(".content_win").scrollTop($(".MessageClass[searchId='" + arrIndex + "']")[0].parentNode.parentNode.parentNode.offsetTop - $(".MessageClass[searchId='" + arrIndex + "']").parent().parent().parent().height());
                }
                arrIndex++;
            } else {
                alert("找不到/"" + content + "/"");
            }
        }
    });
    //上一个
    $(".btnUp").click(function () {
        var content = $("#txtSearchContent").val();
        if (content != "") {
            $(".MessageClass b").each(function () {
                var sbefore = $(this).html();
                $(this).replaceWith(sbefore);
            });
            if (arrIndex > 0) {
                $(".MessageClass[searchId='" + (arrIndex - 1) + "']").html($(".MessageClass[searchId='" + (arrIndex - 1) + "']").html().replace(content, "<b style='color:blue'>" + content + "</b>"));
                arrIndex--;
                if ($(".content_win").length > 0) {
                    $(".content_win").scrollTop($(".MessageClass[searchId='" + arrIndex + "']")[0].parentNode.parentNode.parentNode.offsetTop - $(".MessageClass[searchId='" + arrIndex + "']").parent().parent().parent().height());
                }
            } else {
                alert("找不到/"" + content + "/"");
            }
        }
    });
}
//获取历史消息
function getLsMsg() {
    $.ajax({
        type: "get",
        timeout: 15000,
        url: "Ashx/ListenChat.ashx?v=" + new Date().getTime(),
        data: { "type": "lsMsg"},
        dataType: "json",
        contentType: "application/json; charset=utf8",
        success: function (data) {
            if (data.JsonSub) {
                processOldData(data.JsonSub);
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            window.setTimeout("getLsMsg()", 5000);
        }
    });
}

//处理历史的信息 数据库传回发送消息人，时间，内容。
function processOldData(messageInfo) {
    var messageHtml = '';
    if (messageInfo) {
        $.each(messageInfo, function (i, message) {
            messageHtml += addMessage(message.f_member.toUpperCase(), message.f_msgDate, message.f_message);
        });
        $(".con_main").prepend(messageHtml);
    }
    setScrollTop();
}
//添加其它用户发送的文字信息
function addMessage(userName, f_msgDate, f_message) {
    if (f_message) {
        var messageDate;
        if (f_msgDate) {
            messageDate = new Date(f_msgDate.replace(/-/g, "/"));
        }
        var messageContent = '<li><div class="figure_r"><div class="dhk_left">';
        messageContent += '<span style="color: #888; display: block;">' + userName + '</span>';
        messageContent += '<span class="MessageClass">' + turnMsgImg(f_message) + '</span></div>';
        messageContent += '<span class="dhk_light">' + messageDate.Format("hh:mm") + '</span>';
        messageContent += '</div></li>';
        return messageContent;
    } else {
        return "";
    }
}
//将消息转回
function turnMsgImg(message) {
    return message.replace(/{/g, "<").replace(/}/g, ">");
}
//设置div高度
function setScrollTop() {
    if ($(".content_win").length > 0) {
        var h = $(".content_win")[0].scrollHeight;
        $(".content_win").scrollTop(h);
    }
}

function Request(key) {
    var svalue = window.location.search.match(new RegExp("[/?/&]" + key + "=([^/&]*)(/&?)", "i"));
    return svalue ? svalue[1] : svalue;
}
///
//处理日期
///
Date.prototype.Format = function (fmt) {
    var o =
     {
         "M+": this.getMonth() + 1, //月份 
         "d+": this.getDate(), //日 
         "h+": this.getHours(), //小时 
         "m+": this.getMinutes(), //分 
         "s+": this.getSeconds(), //秒 
         "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
         "S": this.getMilliseconds() //毫秒 
     };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

<!-样式ListenChat.css-->
html,body,div,span,a,img,ul,li,form,input{margin:0;padding:0;}
a,img,input{border:0}
p,span,input,a,div{font-family:"微软雅黑","Microsoft JhengHei"," Microsoft YaHei ","SimHei","SimSun";}
li{ list-style:none}
a{ text-decoration:none; cursor:pointer;}
body{ background:#FFF; margin:0 auto; background-position:top; font-size:12px; }


.sear_menu_bg{
 width:510px;
 height:40px;
 background:#9ab8d6;
 border-top:#7897b3 1px solid;
    margin:0 auto;
 }
.hunt_for{
 float:left;
 width:236px;
 height:29px;
 margin:6px 6px 0px 6px;
    position:relative;
    z-index:10;
 }
.hunt_left{
 background:url(../images/sousuo2.png) no-repeat 0px 0px;
 height:29px;
 width:5px;
 float:left;
 } 
.hunt_center{
 background:url(../images/sousuo3.png) repeat-x 0px 0px;
 width:226px;
 height:29px;
 float:left;
 vertical-align:middle;
 } 
.hunt_right{
 background:url(../images/sousuo2.png) no-repeat -5px 0px;
 height:29px;
 width:5px;
 float:right;
    }
.hunt_center input
   {
 line-height:24px;
 color:#085896;
 height:24px;
 width:190px;
 border:none;
 margin-top:3px;
 margin-left:6px;
 }
.affirm_bg{
 float:right;
 width:58px;
 height:28px;
 margin-top:6px;
 margin-right:6px;
 }
.affirm_left_bg{
 background:url(../images/ready.png) no-repeat 0px 0px;
 width:5px;
 height:28px;
 float:left;
 } 
.affirm_center_bg{
 float:left;
 background:url(../images/ready2.png) repeat-x 0px 0px;
 width:48px;
 height:28px;
 line-height:28px;
 text-align:center;
 color:#FFF;
 font-weight:bold;
 } 
.affirm_right_bg{
 float:right;
 background:url(../images/ready.png) no-repeat -5px 0px;
 width:5px;
 height:28px;
 }

.content_win{
 width:510px;
 height:370px;
 border:#7897b3 solid 1px;
    margin:0 auto;
    overflow:auto;
 }
.con_main{
 margin-left:18px;
 margin-right:16px;
 margin-top:10px;
 }
.figure_l{
 float:left;
 }
.figure_r{
 float:left;
 margin-left:6px;
 position:relative;
 width:380px;
 }
.dhk_left{
 background:#e6f4ff;
 border:#a9c0e2 solid 1px;
 padding:6px 4px;
 width:370px;
 word-wrap:break-word; 
 }
.dhk_light{
 position:absolute;
 color:#9f9f9f;
 right:-40px;
 top:40%;
 }
.con_main li{
 padding-bottom:22px;
 clear:both;
 overflow:hidden;
 }


                                                        
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/tech/aiops/57965.html
                        


                        

                        

                            
 赞 (0)

                                                    


                        

                            

                                                                

                                    

                                                                                     0                                         0                                                                            

                                    
                                    

                                        
                                    

                                

                            

                        

                    

                                            

                    

                
                

                     上一篇
                    2021年8月9日 09:44
                

            

                            

                
                

                    下一篇 
                    2021年8月9日 09:44
                

            

            

                                                                

                            
相关推荐
                        

                    


    	

		
发表回复 
登录后才能评论