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

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

• 智能运维 


 
<!--前台-->
<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/57965.html
                        






 赞 (0)











 0                                                                            






















 上一篇
2021年8月9日









下一篇 
2021年8月9日









相关推荐
                        






发表回复 
登录后才能评论