📄 chatroom.aspx
字号:
<%@ Page language="c#" Inherits="book09.ChatRoom" codePage="936" CodeFile="ChatRoom.aspx.cs" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>聊天室</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<LINK href="global.css" type="text/css" rel="stylesheet">
<script language="javascript">
//发送消息
function send()
{
var txtContent = document.all("content").value; //文本框输入内容
if (txtContent == "") return;
var user_to = document.all("userlist").value; //聊天对象
var textcolor = document.all("textcolor").value; //颜色
var expression = document.all("expression").value; //表情
var isPublic = !(document.all("isSecret").checked); //是否密谈
//调用服务器端方法发送消息
ChatRoom.SendMsg(txtContent, user_to, textcolor, expression, isPublic);
//更新聊天内容显示
var div = document.all("chatcontent");
div.innerHTML = ChatRoom.GetNewMsgString().value + div.innerHTML;
//清空输入框
document.all("content").value = "";
}
//定时更新聊天内容
function refresh_chatcontent()
{
//调用服务器方法获取最新消息的HTML字符串
var div = document.all("chatcontent");
var strNewMsg = ChatRoom.GetNewMsgString().value;
//判断是否为空，避免不必要的更新
if (strNewMsg != "")
div.innerHTML = strNewMsg + div.innerHTML;
//定时更新
window.setTimeout(refresh_chatcontent, 1000);
}
//更新用户列表（左侧和下拉列表）
function refresh_onlineusers()
{
//发送对象列表
var userlist = document.all("userlist");
//调用服务器端方法获取用户列表字符串（用逗号分隔）
var strUserlist = ChatRoom.GetOnlineUserString().value;
//获取客户端显示的用户列表字符串
var strUserlistClient = "";
for (var i = 1;i < userlist.options.length;i++)
{
if (i != userlist.options.length - 1)
{
strUserlistClient += userlist.options[i].value + ",";
}
else
{
strUserlistClient += userlist.options[i].value;
}
}
if (strUserlistClient != strUserlist) //在线用户列表发生变化
{
var userArr = strUserlist.split(',');
//在线用户数
var usercount = document.all("usercount");
usercount.innerHTML = "在线名单：（" + userArr.length + "人）";
//左边用户列表
var tableHTML = "<table>";
for (var i = 0;i < userArr.length;i++)
{
tableHTML += "<tr><td><label onmouseover=\"this.style.cursor='hand'\" onmouseout=\"this.style.cursor='default'\" onclick=\"setObj('" + userArr[i] + "')\">" + userArr[i] + "</label></td></tr>";
}
tableHTML += "</table>";
var div = document.all("onlineusers");
div.innerHTML = tableHTML;
//初始化
while (userlist.options.length > 0)
{
userlist.removeChild(userlist.options[0]); //清空所有选项
}
//增加“所有的人”选项
var oOption = document.createElement("OPTION");
oOption.text = "所有的人";
oOption.value = "大家";
userlist.add(oOption);
//下拉列表中增加在线用户的选项
for (var i = 0;i < userArr.length;i++)
{
var oOption = document.createElement("OPTION");
oOption.text = userArr[i];
oOption.value = userArr[i];
userlist.add(oOption);
}
}
//每隔1秒更新
window.setTimeout(refresh_onlineusers, 1000);
}
//退出聊天室
function logout()
{
ChatRoom.Logout();
}
//设置聊天对象
function setObj(str)
{
var userlist = document.all("userlist");
for (var i = 0;i < userlist.options.length;i++)
{
if (str == userlist.options[i].value)
{
userlist.selectedIndex = i;
break;
}
}
}
//关闭浏览器窗口
function Close()
{
var ua = navigator.userAgent;
var ie = navigator.appName == "Microsoft Internet Explorer" ? true:false;
if (ie)
{
var IEversion=parseFloat(ua.substring(ua.indexOf("MSIE ")+5,ua.indexOf(";",ua.indexOf("MSIE "))));
if (IEversion< 5.5)
{
var str = '<object id=noTipClose classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">';
str += '<param name="Command" value="Close"></object>';
document.body.insertAdjacentHTML("beforeEnd", str);
document.all.noTipClose.Click();
}
else
{
window.opener = null;
window.close();
}
}
else
{
window.close();
}
}
</script>
</HEAD>
<body bottomMargin="0" onbeforeunload="logout()" leftMargin="0" topMargin="0" rightMargin="0" style="text-align: center">
<form id="Form1" method="post" runat="server">
<br />
<br />
<br />
<TABLE id="Table1" cellSpacing="0" cellPadding="0" border="0" style="border-right: #000000 2px double; border-top: #000000 2px double; border-left: #000000 2px double; width: 74%; border-bottom: #000000 2px double; height: 57%">
<TR>
<TD style="FONT-SIZE: 12px" vAlign="top" width="150" background="img/onlinebg.jpg"><br>
<br>
<div id="usercount"></div>
<div id="onlineusers"></div>
</TD>
<TD vAlign="top" background="img/bgbrick.gif">
<table style="width: 99%">
<tr>
<td align="center" style="FONT-WEIGHT: bold; FONT-SIZE: 18px; COLOR: #337755; FONT-FAMILY: 宋体, Arial; width: 655px;">
<br>
啸天聊天室-欢迎您的光临
<hr>
</td>
</tr>
<tr>
<td vAlign="top" style="width: 655px; height: 279px">
<div id="chatcontent" style="OVERFLOW-Y: scroll;WIDTH: 100%; POSITION: relative; HEIGHT: 100%; left: 0px; top: 0px;"></div>
</td>
</tr>
</table>
</TD>
</TR>
<TR height="65">
<TD bgColor="#0099cc" align="center" valign="center">
<label onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor='default'" onclick="document.all('chatcontent').innerHTML = ''" style="FONT-SIZE:14px;FONT-WEIGHT: bold; COLOR: #ffcc00; TEXT-ALIGN: center">清空屏幕</label>
<br>
<label onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor='default'" onclick="if (confirm('您确定要退出该聊天室吗？')) Close();" style="FONT-SIZE:14px;FONT-WEIGHT: bold; COLOR: #ffcc00; TEXT-ALIGN: center">退出聊天</label>
</TD>
<TD style="FONT-SIZE: 13px; width: 820px;" align="center" background="img/chatformbg.jpg">颜色：
<select style="FONT-SIZE: 12px" name="textcolor">
<option style="COLOR: #000000" value="000000" selected>
绝对黑色<option style="COLOR: #000080" value="000080">
忧郁的蓝<option style="COLOR: #0000ff" value="0000ff">
碧空蓝天<option style="COLOR: #008080" value="008080">
灰蓝种族<option style="COLOR: #0080ff" value="0080ff">
蔚蓝海洋<option style="COLOR: #8080ff" value="8080ff">
清清之蓝<option style="COLOR: #8000ff" value="8000ff">
发亮蓝紫<option style="COLOR: #aa00cc" value="aa00cc">
紫的拘谨<option style="COLOR: #808000" value="808000">
卡其制服<option style="COLOR: #808080" value="808080">
伦敦灰雾<option style="COLOR: #ccaa00" value="ccaa00">
卡布其诺<option style="COLOR: #800000" value="800000">
苦涩心红<option style="COLOR: #ff0000" value="ff0000">
正宗喜红<option style="COLOR: #ff0080" value="ff0080">
爱的暗示<option style="COLOR: #ff00ff" value="ff00ff">
红的发紫<option style="COLOR: #ff8080" value="ff8080">
红旗飘飘<option style="COLOR: #ff8000" value="ff8000">
黄金岁月<option style="COLOR: #ff80ff" value="ff80ff">
紫金绣贴<option style="COLOR: #008000" value="008000">
橄榄树绿<option style="COLOR: #345678" value="345678">我不知道</option>
</select>
表情：
<select style="FONT-SIZE: 12px" name="expression">
<option value="" selected>
请选择<option value="笑着">
笑着<option value="高兴地">
高兴地<option value="含情脉脉">
含情脉脉<option value="微笑">
微笑<option value="幸福">
幸福<option value="有点脸红">
有点脸红<option value="使劲安慰">
使劲安慰<option value="自言自语">
自言自语<option value="差点要哭">
差点要哭<option value="嚎啕大哭">
嚎啕大哭<option value="一把鼻涕">
一把鼻涕<option value="很无辜">
很无辜<option value="流口水">
流口水<option value="神秘兮兮">
神秘兮兮<option value="幸灾乐祸">
幸灾乐祸<option value="很不服气">
很不服气<option value="不怀好意">
不怀好意<option value="拳打脚踢">
拳打脚踢<option value="不知所措">
不知所措<option value="翻箱倒柜">
翻箱倒柜<option value="很遗憾">
很遗憾<option value="很严肃">
很严肃<option value="善意警告">
善意警告<option value="正气凛然">
正气凛然<option value="哈欠连天">
哈欠连天<option value="小声讲">
小声讲<option value="大声喊叫">
大声喊叫<option value="尖叫一声">
尖叫一声<option value="遗憾地说">
遗憾地说<option value="无精打采">
无精打采<option value="想吐">
想吐<option value="真诚">
真诚<option value="不好意思">
不好意思<option value="高兴地唱">
高兴地唱<option value="轻轻地唱">
轻轻地唱<option value="很诧异">
很诧异<option value="依依不舍">依依不舍</option>
</select>
聊天对象：
<SELECT style="FONT-SIZE: 12px" name="userlist">
<OPTION value="大家" selected>所有的人</OPTION>
</SELECT>
<INPUT id="isSecret" type="checkbox" name="isSecret">密谈
<br>
<br />
内容：
<INPUT id="content" onkeydown="if (event.keyCode == 13) {send();return false;}" type="text"
maxLength="100" size="70" name="content"> <INPUT id="btnSend" onclick="send();return false;" type="button" value="发送" name="btnSend">
</TD>
</TR>
</TABLE>
<script language="javascript">
refresh_chatcontent();
refresh_onlineusers();
</script>
</form>
</body>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -