📄 chatroom.aspx
字号:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="chatroom.aspx.cs" Inherits="chatroom" %>
<!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 runat="server">
<title>Chatting Room</title>
<link type="text/css" href="css/global.css">
<script src=javascript/common.js type=text/javascript></script>
</head>
<body onunload="dialogArguments.sendWindow=false;" onload="dialogArguments.sendWindow=true;">
<form id="form1" runat="server">
<div style="text-align: center">
<strong><span style="font-size: 24pt"><span style="color: #333399; background-color: #ffffff">
Chatting Room</span></span></strong>
<hr color="#ff99cc" unselectable="on" size="4" />
</div>
<table bgcolor="#ffffff" border="2" style="width: 792px; height: 443px">
<tr>
<td colspan="3" style="height: 373px; width: 729px;">
<div id="recentMsg" style="width: 779px; height: 368px">
</div>
</td>
</tr>
<tr>
<td colspan="3" style="height: 30px; width: 729px;">
<asp:Label ID="Label1" runat="server" Font-Size="X-Large" ForeColor="Maroon">Input the message and click Send or press ENTER key:</asp:Label></td>
</tr>
<tr>
<td colspan="3" style="height: 40px; width: 729px;">
<input id="content" onkeydown="if (event.keyCode==13) {sendMessage();return false;}"
style="width: 55%; height: 30px" type="text" />
<input onclick="javascript:sendMessage()" style="width: 58px; border-top-style: groove;
border-right-style: groove; border-left-style: groove; background-color: #ebf1fa;
border-bottom-style: groove; height: 34px;" type="button" value="Send" /></td>
</tr>
<tr>
<td colspan="3" style="width: 729px">
</td>
</tr>
</table>
<script language="javascript">
// Obtain the most recent messages
function getRecentMsg()
{
// the <div> object for showing messages
var div_recentMsg = el("recentMsg");
// Get the user name according to the URL
var username = document.location.search.split('=')[1];
// Obtain the DataTable for the most recent messages
var dt = AjaxProChat.GetRecentMsg(username).value.Tables[0];
// Display the messages in the date order
for (var i = dt.Rows.length - 1;i >= 0;i--)
{
// one message in response to one <span> object
var oneMsg = document.createElement("span");
// the message sender and corresponding sent content
var strLine1 = dt.Rows[i].sender + " says: (" + dt.Rows[i].sendtime + ")";
strLine1 = DealBrackets(strLine1);
// the message content
var strLine2 = dt.Rows[i].content;
strLine2 = DealBrackets(strLine2);
// show style
oneMsg.innerHTML = "<pre>" + strLine1 + "<br> " + strLine2 + "</pre>";
oneMsg.style.padding = "2px 2px 2px 2px";
oneMsg.style.color = (dt.Rows[i].sender == username) ? "blue" : "red";
oneMsg.style.fontFamily = "'Courier New'";
// attached to DOM
div_recentMsg.appendChild(oneMsg);
}
}
// Send messages
function sendMessage()
{
// input box for entering message
var ta_content = el("content");
// if the content input is not empty
if (ta_content.value.length > 0)
{
//the message show area
var div_recentMsg = el("recentMsg");
// the user name
var username = document.location.search.split('=')[1];
// send the message
AjaxProChat.SendMessage(username, ta_content.value);
// clear the input box
ta_content.value = "";
// roll up the web page with the messages
ta_content.scrollIntoView(false);
//obtain new messages
getNewMessage();
}
}
//Obtain the new messages
function getNewMessage()
{
// the user name
var username = document.location.search.split('=')[1];
// the message show area
var div_recentMsg = el("recentMsg");
// Obtain the DataTable for the newest messages
var dt = AjaxProChat.chatroomGetNewMessage().value.Tables[0];
for (var i = 0;i < dt.Rows.length;i++)
{
// one message in response to one <span> object
var oneMsg = document.createElement("span");
// the message sender and corresponding sent content
var strLine1 = dt.Rows[i].sender + " says: (" + dt.Rows[i].sendtime + ")";
strLine1 = DealBrackets(strLine1);
// the content of the message
var strLine2 = dt.Rows[i].content;
strLine2 = DealBrackets(strLine2);
// show style
oneMsg.innerHTML = "<pre>" + strLine1 + "<br> " + strLine2 + "</pre>";
oneMsg.style.padding = "2px 2px 2px 2px";
oneMsg.style.color = (dt.Rows[i].sender == username) ? "blue" : "red";
oneMsg.style.fontFamily = "'Courier New'";
// attached to DOM
div_recentMsg.appendChild(oneMsg);
}
}
//The main loop
function mainLoop()
{
///Obtain the new messages
getNewMessage();
// check once every per second
setTimeout("mainLoop()", 1000);
}
//show the most recent messages
getRecentMsg();
//update the message list on time
mainLoop();
</script>
</form>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -