1.定时刷新
2.有滚动条的DIV处于下面
3.Enter健发送消息，Ctrl+Enter健换行
4.js时间对象Date运用
5.json数据在jquery中的嵌套循环
JSONObject json = new JSONObject();
org.json.JSONArray arr = new org.json.JSONArray();
for(){
JSONObject cell = new JSONObject();
org.json.JSONArray jsonArray = new org.json.JSONArray();
for(){
JSONObject rows = new JSONObject();
jsonArray.put(rows);
}
cell.put("reverts", jsonArray);
arr.put(cell);
}
json.put("messages", arr);
源代码：
<!DOCTYPE HTML>
<html>
<head>
<title>right.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<#include "head.html"/>
<script type="text/javascript">
setInterval(getRoomList, 5000);
setInterval(myRefresh, 5000);
function myRefresh(){
var mains = $(".mainadvisory");
var len = mains.length;
var i = 0;
if(len > 0){
for(i;i<len;i++){
var id = $(mains[i]).attr("bj");
locationHref(id);
}
}
}
function setScroll(room){
var obj = document.getElementById("shangmain"+room);
obj.scrollTop= obj.scrollHeight;
}
function closeChat(room){
if(!confirm("你确定关闭咨询窗口吗？")) {
return;
}
$("#contentframe").html("");
$("#topframe").html("");
$.post("closeChatRoom.do",{roomID:room},
function(data){
getRoomList();
}
);
}
function addRevert(room){
var advs = $(".advissst"+room);
var i = advs.length - 1;
var aid = $(advs[i]).val();
var content = $("#rmsg"+room).val();
content = content.replace(/\n/g,"<br />");
var time = getTime();
if(content != null && content.length > 5) {
$.post(
"saveRev.do",
{aid: aid, content: content,time:time},
function(data){
$("#contents"+room).append("<div class='firstcontent'>我的回答："+time+"</div>");
$("#contents"+room).append("<div class='zhuanjia'>"+content+"</div>");
setScroll(room);
}
);
} else {
alert("请输入回复内容!");
}
$("#rmsg"+room).val("");
}
document.οnkeydοwn=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
var id = $("#hideroomID").val();
if(e.ctrlKey&&e.keyCode==13){
var value = $("#rmsg"+id).val();
value = value + "\n";
$("#rmsg"+id).val(value);
}else if(e.keyCode==13&&!e.ctrlKey){
addRevert(id);
return false;
}
};
function locationHref(roomID){
$.post(
"exchangeData.do",{roomID:roomID},
function(data){
var text="";
var advissst = "advissst" + roomID;
$.each(data, function(i, item) {
text += "<input type='hidden' class='"+advissst+"' value='"+item.aid+"' />";
text += "<div class='firstcontent'>咨询用户："+item.atime+"</div>";
text += "<div class='secondcontent'>"+item.acontent+"</div>";
var c = item.reverts;
if(c!=undefined){
$.each(c, function(i, tem){
text += "<div class='firstcontent'>我的回答："+tem.time+"</div>";
text += "<div class='zhuanjia'>"+tem.content+"</div>";
});
}
});
$("#contents"+roomID).html(text);
setScroll(roomID);
},'json'
);
}
function getTime(){
var d = new Date();
var time = d.getFullYear() + "-" + addZero(d.getMonth()+1) + "-" + addZero(d.getDate()) + " " + addZero(d.getHours())+":"+addZero(d.getMinutes())+":"+addZero(d.getSeconds());
return time;
}
function addZero(date){
if(date<10){
date = "0" + date;
}
return date;
}
function acceptRevert(rid){
$.post("acceptRevert.do",{roomID:rid},
function(data){
var room = data.room;//房间ID
var divRoom = "divroom" + room;
var roomID = "room" + room;
var contents = "contents" + room;
var rmsg = "rmsg" + room;
var smid = "shangmain" + room;
//创造一个对话框出来
var divTxt = "<div class='mainadvisory' id='"+divRoom+"' bj='"+room+"'><div class='shangmian' id='"+smid+"'>";
divTxt += "<input type='hidden' value='"+room+"' id='hideroomID' />";
divTxt += "<div class='contentDiv' id='"+contents+"'>";
$.each(data.messages, function(i, item){
var aid = item.aid;
var aidid = "aid" + room;
var advissst = "advissst" + room;
var time = item.atime;
var content = item.acontent;
divTxt += "<input type='hidden' value='"+aid+"' id='"+aidid+"' class='"+advissst+"'/>";
divTxt += "<div class='firstcontent'>咨询用户："+time+"</div>";
divTxt += "<div class='secondcontent'>"+content+"</div>";
var c = item.reverts;
if(c!=undefined){
$.each(c, function(i, tem){
divTxt += "<div class='firstcontent'>我的回答："+tem.time+"</div>";
divTxt += "<div class='zhuanjia'>"+tem.content+"</div>";
});
}
});
divTxt += "</div></div><div class='xiamian'><div class='sendDiv'><p>";
divTxt += "<textarea id='"+rmsg+"' rows='3' cols='200' style='margin-left: 0px; margin-right: 0px; width: 522px;'></textarea></p>";
divTxt += "<p class='sendBtn'>";
divTxt += "<input type='button' value='回复' οnclick="+"addRevert('"+room+"')"+" class='s_btn' style='width: 70px' title='按Enter健发送，按Ctrl+Enter健换行' />";
divTxt += "<input type='button' value='关闭' οnclick="+"closeChat('"+room+"')"+" class='s_btn' style='width: 70px;margin-right: 0px;' title='按Enter健发送，按Ctrl+Enter健换行' /></p>";
divTxt += "</div></div></div>";
$("#topframe").html("用户咨询:"+room+"号");
$("#contentframe").html(divTxt);
setScroll(room);
$("#listzj"+room).attr("class","");
},'json'
);
}
function getRoomList(){
$.post("alladvisoryroomlist.do",
function(data){
var text = "";
if(data!=null){
$.each(data, function(i, item){
var flag = item.isnews;
var obj = $("#room"+item.roomid);
var len = obj.length;
if(flag && len <= 0){
text += "<li><div class='zjindexd' id='listzj"+item.roomid+"' οnclick='acceptRevert("+item.roomid+")'";
}else{
text += "<li><div id='listzj"+item.roomid+"' οnclick='acceptRevert("+item.roomid+")'";
}
text += "<div>"+item.roomid+":"+item.user+"<br>";
text += "开始时间"+item.time+"</div>";
text += "</div></li>";
});
}
$("#room_ul").html(text);
},'json');
}
window.οnlοad=function(){
getRoomList();
}
</script>
</head>
<body>
<div class="row-fluid">
<h2><font color="#CC3300"> 这里是在线咨询管理后台</font></h2>
</div>
<div class="maintalk">
<div class="contenttop" id="topframe">
<p></p>
</div>
<div class="contentcenter" id="contentframe"></div>
</div>
<div class="roomcls">
<ul class="roomsul" id="room_ul">
</ul>
</div>
</body>
</html>
2437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
