📄 chartroom.htm
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>聊天室首页</title>
<script type = "text/javascript" src = "Aaron.js"></script>
<script type = "text/javascript" >
//window.setInterval(GetMessages,5);
var talk;
//这是一个时钟，用于显示当间时间
setInterval("ShowClock()",1000);
//setInterval("GetMessages()",2000);
function ShowClock()
{
var oTime = new Date();
var oDisplay = "当前时间：";
oDisplay += oTime.getHours() + "时";
oDisplay += oTime.getMinutes() + "分";
oDisplay += oTime.getSeconds() + "秒";
document.body.all("timer").innerText = oDisplay;
}
//处理用户发送消息的事件
function PostMessage()
{
talk = document.getElementById("talkValue").value;
if (talkValue == "")
{
alert("不能发送空消息");
return false;
}
DisplayMessage();
var xmlRequest = CreateXMLHttpRequest();
xmlRequest.onreadystatechange = processPostBack;
xmlRequest.open("GET","OnLineMessage.aspx?action=PostMessage",true);
var str = MakeXMLDocument();
xmlRequest.send(str);
// xmlRequest.send(null);
}
//将用户发送的消息在消息栏中显示出来
function DisplayMessage()
{
//var otable = document.getElementById("tableContent").document.getElementById("content");
otable = document.getElementById("content");
var otbody = document.createElement("tbody");
var otr = document.createElement("tr");
var otd = document.createElement("td");
var user = document.getElementById("currentuser").innerText;
var oTime = new Date();
talk = talk.replace("\n","<br>");
otd.innerHTML = "<span style ='color:red'>" + user + "在"+ oTime.toDateString() +"对所有人说:" +"</span>" + "<br>" + talk;
otr.appendChild(otd);
otbody.appendChild(otr);
otable.insertBefore(otbody,otable.lastChild);
}
//创建一个XMLHttpRequest
function CreateXMLHttpRequest()
{
var xmlRequest = false;
if (window.XMLHttpRequest)
{
xmlRequest = new XMLHttpRequest();
if (xmlRequest.overrideMimeType)
{
xmlRequest.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject)
{
try
{
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
try
{
xmlRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
}
}
}
if (!xmlRequest)
{
alert("出现无法预料的错误,创建XMLHttpRequest失败。");
}
else
{
return xmlRequest;
}
}
//生成发送消息时的XML文档
function MakeXMLDocument()
{
var currenttime = document.getElementById("timer").innerText;
var content = document.getElementById("talkValue").value;
var msg = "<Content>" + talk + "</Content>";
msg += "<To>" + "test" + "</To>";
msg += "<From>" + "test" + "</From>";
msg += "<Time>" + timer + "</Time>";
return "<MessageInfo>" + msg + "</MessageInfo>";
}
//处理服务器响应消息
function processPostBack()
{
if (xmlRequest.readyState == 4)
{
if (xmlRequest.status == 200)
{
alert(xmlRequest.responseText);
var xmlDoc = xmlRequest.responseXML;
var xmlEle = xmlDoc.getElementsByTagName("ReturnMessage");
for (var i = 0 ;i < xmlEle.length ;i++)
{
alert(xmlEle[i].childNodes[0].nodeValue);
}
}
}
//alert(xmlRequest.status);
}
///从服务器上取得消息
function GetMessages()
{
var xmlRequest = CreateXMLHttpRequest();
xmlRequest.onreadystatechange = function()
{
if (xmlRequest.readystate == 4)
{
if (xmlRequest.status == 200)
{
alert(xmlRequest.responseText);
var xmlDoc = xmlRequest.responseXML;
var xmlElements = xmlDoc.getElementsByTagName("MessageInfo");
for(var i = 0;i < xmlElements.length;i++)
{
var to = xmlElements[i].childNodes[0].childNodes[0].nodeValue;
var from = xmlElements[i].childNodes[1].childNodes[0].nodeValue;
var content = xmlElements[i].childNodes[2].childNodes[0].nodeValue;
var time = xmlElements[i].childNodes[3].childNodes[0].nodeValue;
DisplayServerMessage(to,from,content,time);
}
}
}
};
var time = new Date();
currentTime = time.getFullYear() + "-";
currentTime += time.getMonth() + "-"
currentTime += time.getDay() + " ";
currentTime += time.getHours() + "-";
currentTime += time.getMinutes() + "-";
currentTime += time.getSeconds();
alert(currentTime);
xmlRequest.open("GET","OnLineMessage.aspx?action=GetMessages&Time=2007-1-1",true);
xmlRequest.send(null);
}
function DisplayServerMessage(to,from,content,time)
{
otable = document.getElementById("content");
var otbody = document.createElement("tbody");
var otr = document.createElement("tr");
var otd = document.createElement("td");
otd.innerHTML = "<span style ='color:red'>" + from + "在"+ time +"对所有人说:" +"</span>" + "<br>" + content;
otr.appendChild(otd);
otbody.appendChild(otr);
otable.insertBefore(otbody,otable.lastChild);
}
//得到当前用户
function GetCurrentUser()
{
var xmlRequest = CreateXMLHttpRequest();
xmlRequest.onreadystatechange = function()
{
if (xmlRequest.readystate == 4)
{
if (xmlRequest.status == 200)
{
alert(xmlRequest.responseText);
var user = xmlRequest.responseXML;
var userNode = user.getElementsByTagName("UserInfo");
var userElement = document.getElementById("currentuser");
userElement.innerText = userNode[0].childNodes[0].nodeValue;
}
}
}
xmlRequest.open("GET","OnLineMessage.aspx?action=GetCurrentUser",true);
xmlRequest.send(null);
}
//得到在线人员列表
function GetOnLineUser()
{
var xmlRequest = CreateXMLHttpRequest();
xmlRequest.onreadystatechange = function()
{
if (xmlRequest.readystate == 4)
{
if (xmlRequest.status == 200)
{
var user = xmlRequest.responseXML;
var userNodes = user.getElementsByTagName("UserInfo");
ClearOnLineUsers();
for (var i = 0;i < userNodes.length;i++)
{
var text = document.createTextNode(userNodes[0].childNodes[0].nodeValue);
var td = document.createElement("td");
var tr = document.createElement("tr");
var tbody = document.createElement("tbody");
td.appendChild(text);
tr.appendChild(td);
tbody.appendChild(tr);
var table = document.getElementById("users");
table.insertBefore(tbody,table.lastChild);
}
}
}
}
xmlRequest.open("GET","OnLineMessage.aspx?action=GetAllUser",true);
xmlRequest.send(null);
}
//清空所有的用户
function ClearOnLineUsers()
{
var otable = document.getElementById("users");
for (var i = 0 ;i < otable.childNodes.length;i++)
{
otable.removeChild(otable.childNodes[i]);
}
}
</script>
</head>
<body onload = "DisplayPhoto('faces','talkValue');">
<table>
<tr>
<td><div id = "currentuser"></div>您好！</td><td><div id = "timer"></div></td>
</tr>
</table>
<table width = "950" style ="table-layout:fixed; word-break:break-all; word-wrap :break-word;" border="1" bordercolor="green">
<tr>
<td width = "700" style="height: 1px; overflow :scroll;"><table id = "content"><tbody><tr><td></td></tr></tbody></table></td>
<td width = "250" style="height: 242px" rowspan = "2"><table id = "users"><tbody><tr><td></td></tr></tbody></table></td>
</tr>
<tr>
<td width = "250"><table id = "faces" onload = "DisplayPhoto('faces','talkValue');"><tbody><tr><td></td></tr></tbody></table></td>
</tr>
<tr>
<td colspan = "2" style="height: 53px">
<textarea id = "talkValue" style="width: 929px; height: 245px;"></textarea>
<br />
<input type ="button" id = "btnPost" value = "发言" onclick = "PostMessage();"/>
</td>
</tr>
</table>
<input type = "Button" id = "test" value = "Check Test" onclick = "GetMessages();"/>
<input type = "Button" id = "GetCurrentUser" value = "Get Current User" onclick = "GetCurrentUser();"/>
<input type = "Button" id = "GetOnLineUser" value = "Get OnLine User" onclick = "GetOnLineUser();"/>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -