对聊天室外观和功能进行大改,添加使用表情包功能

This commit is contained in:
FJY
2017-11-19 22:58:26 +08:00
parent 6551c61a0b
commit 5e87ddf1ba
62 changed files with 349 additions and 167 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

View File

@@ -0,0 +1 @@
ren *.gif *.jpg

View File

@@ -0,0 +1 @@
ren *.jpg *.gif

View File

@@ -0,0 +1,69 @@
<%@ page language="java" import="java.sql.*"
contentType="text/html;charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>检验插入页面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<br>
<%
boolean flag = false;
request.setCharacterEncoding("utf-8");
String adminNo = request.getParameter("adminno");
String name = request.getParameter("adminname");
String adminsex = request.getParameter("sex");
String adminjob = request.getParameter("job");
%>
<%
String driver = "com.mysql.jdbc.Driver";
String url = "jdbc:mysql://localhost:3306/db_school?useUnicode=true&characterEncoding=utf-8";
String use = "root";
String password = "";
Class.forName(driver);
Connection conn = DriverManager.getConnection(url, use, password);
PreparedStatement sql = conn
.prepareStatement("insert into adminstrator_record(AdminNo,AdminName,Adminsex,Adminjob)values(?,?,?,?)");
sql.setString(1, adminNo);
sql.setString(2, name);
sql.setString(3, adminsex);
sql.setString(4, adminjob);
int rtn = sql.executeUpdate();
if (rtn != 0) {
flag = true;
}
sql.close();
conn.close();
%>
<!-- 判断是否是插入成功 -->
<%
if (flag == true) {
%>
<jsp:forward page="insert_success.jsp" />
<%
} else if (flag == false) {
%>
<jsp:forward page="insert_success.jsp" />
<%
}
%>
</body>
</html>

View File

@@ -1,11 +1,12 @@
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.util.*" errorPage="" %>
<% request.setCharacterEncoding("gb2312"); %>
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.util.*" errorPage="" %>
<link href="../css/chart_style.css" rel="stylesheet">
<% request.setCharacterEncoding("utf-8"); %>
<%
if(session.getAttribute("actualuser").equals("null")){
out.println("<script language='javascript'>alert('您还没有登录不能进入本聊天室');parent.location.href='login.html';</script>");
out.println("<script language='javascript'>alert('您还没有登录不能进入本聊天室');parent.location.href='login.html';</script>");
}
if(session.getAttribute("actualuser").equals("request.getParameter("+request.getParameter("tempuser")+")")){
out.println("<script language='javascript'>alert('请重新选择聊天对象');</script>");
out.println("<script language='javascript'>alert('请重新选择聊天对象');</script>");
}
String message=request.getParameter("message");
String select=request.getParameter("select");
@@ -14,24 +15,24 @@ String color=request.getParameter("color");
if(message!=null&&tempuser!=null){
if(message.startsWith("<F1")){
out.print("<marquee direction='left' scrollamount='23'>"+
"<font color='blue'>"+"请不要输入带有标记的特殊符号"+"</font>"+"</marquee>");
"<font color='blue'>"+"请不要输入带有标记的特殊符号"+"</font>"+"</marquee>");
return;
}else if(message.endsWith("F1>")){
out.print("<marquee direction='left' scrollamount='25'>"+
"<font color='blue'>"+"请不要输入带有标记的特殊符号"+"</font>"+"</marquee>");
"<font color='blue'>"+"请不要输入带有标记的特殊符号"+"</font>"+"</marquee>");
return;
}
if(application.getAttribute("message")==null){ //第一个人说话时
application.setAttribute("message","<br>"+"<font color='blue'>"+
"<strong>"+session.getAttribute("actualuser")+"</strong>"+"</font>"+"<font color='#CC0000'>"+select+"</font>"+"对"+"<font color='green'>"+"["+tempuser+"]"+"</font>"+"说:"+"<font color="+color+">"+message);
if(application.getAttribute("message")==null){ //第一个人说话时
application.setAttribute("message","<br>"+"<font color='black'>"+
"<strong>"+session.getAttribute("actualuser")+"</strong>"+"</font>"+"对"+"<font color='green'>"+"["+tempuser+"]"+"</font>"+"说:"+"<div class='mes'>"+"<font color="+color+">"+message+"</div>");
}else{
application.setAttribute("message","<br>"+"<font color='blue'>"+"<strong>"+session.getAttribute("actualuser")+"</strong>"+"</font>"+"<font color='#CC0000'>"+select+"</font>"+"对"+"<font color='green'>"+"["+tempuser+"]"+"</font>"+"说:"+"<font color="+color+">"+message+"</font>"+application.getAttribute("message"));
application.setAttribute("message","<div class='me'>"+"<br>"+"<font color='black'>"+"<strong>"+session.getAttribute("actualuser")+"</strong>"+"</font>"+"对"+"<font color='green'>"+"["+tempuser+"]"+"</font>"+"说:"+"<div class='mes'>"+"<font color="+color+">"+message+"</div>"+"</font>"+application.getAttribute("message")+"</div>");
}
out.println("<p>"+application.getAttribute("message")+"<p>");
}else{
if(application.getAttribute("message")==null){
out.println("<font color='#cc0000'>"+application.getAttribute("ul")+"</font>"+"<font color='green'>"+"走进了网络聊天室"+"</font>");
out.println("<br>"+"<center>"+"<font color='#aa0000''>"+"请各位聊友注意聊天室的规则,不要在本聊天室内发表反动言论及对他人进行人身攻击,不要随意刷屏。"+"</font>"+"</center>");
out.println("<font color='#cc0000'>"+application.getAttribute("ul")+"</font>"+"<font color='black'>"+"走进了网络聊天室"+"</font>");
out.println("<br>"+"<center>"+"<font color='#000''>"+"请各位聊友注意聊天室的规则,不要在本聊天室内发表反动言论及对他人进行人身攻击,不要随意刷屏。"+"</font>"+"</center>");
}else{
out.println(application.getAttribute("message")+"<br>");
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 198 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 105 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

View File

@@ -1,14 +1,14 @@
<%@ page contentType="text/html;charset=gb2312" language="java" %>
<%@ page contentType="text/html;charset=utf-8" language="java" %>
<html>
<title>
聊天室
聊天室
</title>
<link href="../css/chart_style.css" rel="stylesheet">
<link href="../css/bootstrap.css" rel="stylesheet">
<script language="javascript">
function check(){
if(form1.username.value==""){
alert("请输入用户名!");form1.username.focus();return false;
alert("请输入用户名!");form1.username.focus();return false;
}
}
</script>
@@ -22,7 +22,7 @@ function check(){
</tr>
<tr>
<td width="53" align="center" valign="top" class="word_dark">&nbsp;</td>
<td width="216" align="center" valign="top" class="word_dark">用户名:
<td width="216" align="center" valign="top" class="word_dark">用户名:
<input type="text" name="username"></td>
<td width="94" valign="top" class="word_dark"><input type="image" name="imageField" src="images/go.jpg"></td>
</tr>

View File

@@ -1,5 +1,5 @@
<%@ page contentType="text/html; charset=gb2312" language="java"%>
<% request.setCharacterEncoding("gb2312"); %>
<%@ page contentType="text/html; charset=utf-8" language="java"%>
<% request.setCharacterEncoding("utf-8"); %>
<%@ page import="java.util.Vector"%>
<%@ page import="com.wgh.UserForm"%>
<%

View File

@@ -1,8 +1,8 @@
<%@ page contentType="text/html;charset=gb2312" language="java"%>
<%@ page contentType="text/html;charset=utf-8" language="java"%>
<%@ page import="java.util.Vector"%>
<%@ page import="com.wgh.UserForm"%>
<%
request.setCharacterEncoding("gb2312");
request.setCharacterEncoding("utf-8");
Object username = session.getAttribute("actualuser");
boolean flag = true;
Vector temp = (Vector) application.getAttribute("myuser");
@@ -11,7 +11,7 @@
}
UserForm mylist = new UserForm();
mylist.username = (String) username;
//±£´æµ±Ç°µÇ¼µÄÓû§Ãû
//保存当前登录的用户名
Vector myuser = (Vector) application.getAttribute("myuser");
if (myuser == null) {

View File

@@ -1,12 +1,12 @@
<%@ page contentType="text/html; charset=gb2312" language="java"
<%@ page contentType="text/html; charset=utf-8" language="java"
import="java.sql.*"%>
<%
request.setCharacterEncoding("gb2312");
request.setCharacterEncoding("utf-8");
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>聊天室</title>
<title>聊天室</title>
<link href="../css/chart_style.css" rel="stylesheet">
<link href="../css/bootstrap.css" rel="stylesheet">
<script language="javascript" src="../js/AjaxRequest.js"></script>
@@ -14,7 +14,7 @@
<script language="javascript">
window.setInterval("showContent();", 1000);
window.setInterval("showOnline();", 10000);
//此处需要加&nocache="+new Date().getTime(),否则将出现在线人员列表不更新的情况
//此处需要加&nocache="+new Date().getTime(),否则将出现在线人员列表不更新的情况
function showOnline() {
var loader = new net.AjaxRequest("online.jsp?nocache=" + new Date().getTime(), deal_online, onerror, "GET");
}
@@ -22,7 +22,7 @@
var loader1 = new net.AjaxRequest("content.jsp?nocache=" + new Date().getTime(), deal_content, onerror, "GET");
}
function onerror() {
alert("很抱歉,服务器出现错误,当前窗口将关闭!");
alert("很抱歉,服务器出现错误,当前窗口将关闭!");
window.opener = null;
window.close();
}
@@ -32,14 +32,19 @@
function deal_content() {
content.innerHTML = this.req.responseText;
}
function GetFocus()
{
document.all.message.focus();
}
</script>
<script language="javascript">
function check() { //验证聊天信息
function check() { //验证聊天信息
if (form1.tempuser.value == "") {
alert("请选择聊天对象!");return false;
alert("请选择聊天对象!");return false;
}
if (form1.message.value == "") {
alert("发送信息不可以为空!");form1.message.focus();return false;
alert("发送信息不可以为空!");form1.message.focus();return false;
}
}
function Exit() {
@@ -47,94 +52,126 @@
}
</script>
<script language="javascript">
function set(selectPerson){ //自动添加聊天对象
function set(selectPerson){ //自动添加聊天对象
if(selectPerson!="<%=session.getAttribute("actualuser")%>"){
form1.tempuser.value=selectPerson;
}else{
alert("请重新选择聊天对象!");
alert("请重新选择聊天对象!");
}
}
/*function hello(){
application.invalidate();
response.sendRedirect("index.jsp");7
alert("g");
}
//重复执行某个方法
var t1 = window.setInterval("hello()",1000);
var t2 = window.setInterval("hello()",3000);
//去掉定时器的方法
window.clearInterval(t1); */
</script>
<script language="javascript">
$(window).on('beforeunload', function() {
return '您的视频时间尚未结束,现在退出将无法回到视频';
})
<script language="jscript">
window.onbeforeunload = function() { //当用户单击浏览器中的“关闭”按钮时,执行退出操作
if (event.clientY < 0 && event.clientX > document.body.scrollmax - width) {
Exit(); //执行退出操作
}
}
</script>
</head>
<body onLoad="showContent();showOnline();set('所有人');">
<body onLoad="showContent();showOnline();set('所有人');GetFocus();">
<div class="container">
<div class="row">
<div class="chatTop"></div>
<div class="chatTop">
<center><span class="chatTopspan">VANTEN</span></center>
</div>
</div>
<div class="row">
<div id="online" class="col-xs-3 col-sm-3 list">在线人员列表</div>
<div id="content" class="col-xs-9 col-sm-9 chat">聊天内容</div>
<div class="chat1"><div id="content" class="chat">聊天内容</div></div>
<div id="online" class="list">在线人员列表</div>
</div>
<div class="row">
<div class="chatsent">
<form role="form" action="send.jsp" name="form1" method="post"
<form role="form" action="send.jsp " name="form1" method="post"
onSubmit="return check()">
<p>
<span class="emotion glyphicon glyphicon-heart"></span>
</p>
<center>
<div class="chatsentinput">
[<%=session.getAttribute("actualuser")%>
]对 <input name="tempuser" type="text" value="" size="35"
readonly="readonly"> 表情 <select name="select"
class="wenbenkuang">
<option value="无表情的">无表情的</option>
<option value="微笑着" selected>微笑着</option>
<option value="笑呵呵地">笑呵呵地</option>
<option value="热情的">热情的</option>
<option value="温柔的">温柔的</option>
<option value="红着脸">红着脸</option>
<option value="幸福的">幸福的</option>
<option value="嘟着嘴">嘟着嘴</option>
<option value="热泪盈眶的">热泪盈眶的</option>
<option value="依依不舍的">依依不舍的</option>
<option value="得意的">得意的</option>
<option value="神秘兮兮的">神秘兮兮的</option>
<option value="恶狠狠的">恶狠狠的</option>
<option value="大声的">大声的</option>
<option value="生气的">生气的</option>
<option value="幸灾乐祸的">幸灾乐祸的</option>
<option value="同情的">同情的</option>
<option value="遗憾的">遗憾的</option>
<option value="正义凛然的">正义凛然的</option>
<option value="严肃的">严肃的</option>
<option value="慢条斯理的">慢条斯理的</option>
<option value="无精打采的">无精打采的</option>
</select> 说: <input id="message" name="message" type="text" width="100px">
字体颜色: <select name="color" size="1" class="wenbenkuang"
id="select">
<option selected>默认颜色</option>
<option style="color:#FF0000" value="FF0000">红色热情</option>
<option style="color:#0000FF" value="0000ff">蓝色开朗</option>
<option style="color:#ff00ff" value="ff00ff">桃色浪漫</option>
<option style="color:#009900" value="009900">绿色青春</option>
<option style="color:#009999" value="009999">青色清爽</option>
<option style="color:#990099" value="990099">紫色拘谨</option>
<option style="color:#990000" value="990000">暗夜兴奋</option>
<option style="color:#000099" value="000099">深蓝忧郁</option>
<option style="color:#999900" value="999900">卡其制服</option>
<option style="color:#ff9900" value="ff9900">镏金岁月</option>
<option style="color:#0099ff" value="0099ff">湖波荡漾</option>
<option style="color:#9900ff" value="9900ff">发亮蓝紫</option>
<option style="color:#ff0099" value="ff0099">爱的暗示</option>
<option style="color:#006600" value="006600">墨绿深沉</option>
<option style="color:#999999" value="999999">烟雨蒙蒙</option>
</select> <input name="Submit2" type="submit" class="btn btn-default send"
value="发送">
<div class="word_white" style="display: inline;">[<%=session.getAttribute("actualuser")%>]</div>
<input name="tempuser" class="tempuser" type="text" value="" size="20" readonly="readonly">
<input id="message" name="message" type="text" class="message">
<div class="chatsent2">
<table class="chatsenttable">
<tr>
<td><img src="arclist/1.gif" class="emotion" style="margin-left: 30px;"><br></td>
</tr>
<!-- <tr>
<td>表情 <select name="select"
class="wenbenkuang">
<option value="无表情的">无表情的</option>
<option value="微笑着" selected>微笑着</option>
<option value="笑呵呵地">笑呵呵地</option>
<option value="热情的">热情的</option>
<option value="温柔的">温柔的</option>
<option value="红着脸">红着脸</option>
<option value="幸福的">幸福的</option>
<option value="嘟着嘴">嘟着嘴</option>
<option value="热泪盈眶的">热泪盈眶的</option>
<option value="依依不舍的">依依不舍的</option>
<option value="得意的">得意的</option>
<option value="神秘兮兮的">神秘兮兮的</option>
<option value="恶狠狠的">恶狠狠的</option>
<option value="大声的">大声的</option>
<option value="生气的">生气的</option>
<option value="幸灾乐祸的">幸灾乐祸的</option>
<option value="同情的">同情的</option>
<option value="遗憾的">遗憾的</option>
<option value="正义凛然的">正义凛然的</option>
<option value="严肃的">严肃的</option>
<option value="慢条斯理的">慢条斯理的</option>
<option value="无精打采的">无精打采的</option>
</select> </td>
</tr>
<tr>
<td>说:
字体颜色: <select name="color" size="1" class="wenbenkuang"
id="select">
<option selected>默认颜色</option>
<option style="color:#FF0000" value="FF0000">红色热情</option>
<option style="color:#0000FF" value="0000ff">蓝色开朗</option>
<option style="color:#ff00ff" value="ff00ff">桃色浪漫</option>
<option style="color:#009900" value="009900">绿色青春</option>
<option style="color:#009999" value="009999">青色清爽</option>
<option style="color:#990099" value="990099">紫色拘谨</option>
<option style="color:#990000" value="990000">暗夜兴奋</option>
<option style="color:#000099" value="000099">深蓝忧郁</option>
<option style="color:#999900" value="999900">卡其制服</option>
<option style="color:#ff9900" value="ff9900">镏金岁月</option>
<option style="color:#0099ff" value="0099ff">湖波荡漾</option>
<option style="color:#9900ff" value="9900ff">发亮蓝紫</option>
<option style="color:#ff0099" value="ff0099">爱的暗示</option>
<option style="color:#006600" value="006600">墨绿深沉</option>
<option style="color:#999999" value="999999">烟雨蒙蒙</option>
</select></td>
</tr>-->
<tr>
<td><input name="Submit2" type="submit" class="btn btn-default send"
value="发送">
</td>
</tr>
</table>
</div>
</div>
<input name="button_exit" type="button" class="btn_orange"
value="退出聊天室" onClick="Exit()">
</center>
<input name="button_exit" type="button" class="btn btn-default btn_orange"
value="退出聊天室" onClick="Exit()">
@@ -157,7 +194,7 @@ $(function(){
assign:'message',
path:'arclist/' //表情存放的路径
path:'arclist/' //表情存放的路径
});
@@ -171,7 +208,7 @@ $(function(){
});
//查看结果
//查看结果
function replace_em(str){

View File

@@ -1,8 +1,8 @@
<%@ page contentType="text/html; charset=gb2312" language="java"
<%@ page contentType="text/html; charset=utf-8" language="java"
import="java.util.*"%>
<%@ page import="com.wgh.UserForm"%>
<%
request.setCharacterEncoding("gb2312");
request.setCharacterEncoding("utf-8");
%>
<%
Vector myuser = (Vector) application.getAttribute("myuser");
@@ -10,24 +10,24 @@
<link href="../css/bootstrap.css" rel="stylesheet">
<table class="table table-hover">
<tr>
<td height="32" align="center" class="word_orange disabled">欢迎来到VANTEN聊天室</td>
<td height="32" align="center" class="word_white disabled">欢迎来到VANTEN聊天室</td>
</tr>
<tr>
<td height="23" align="center"><a href="#" onclick="set('所有人')">所有人</a></td>
<td height="23" align="center"><a href="#" class="word_white" onclick="set('所有人')" >所有人</a></td>
</tr>
<%
for (int i = 0; i < myuser.size(); i++) {
UserForm mylist = (UserForm) myuser.elementAt(i);
%>
<tr>
<td height="23" align="center"><a href="#"
onclick="set('<%=mylist.username%>')"><%=mylist.username%></a></td>
<td height="23" align="center" class="word_white"><a href="#"
onclick="set('<%=mylist.username%>')" class="word_white"><%=mylist.username%></a></td>
</tr>
<%
}
%>
<tr>
<td height="30" align="center">当前在线[<font color="#FF6600"><%=myuser.size()%></font>]人
<td height="30" align="center" color="#fff">当前在线[<font color="#fff"><%=myuser.size()%></font>]人
</td>
</tr>
</table>

View File

@@ -1,3 +1,3 @@
<%@ page contentType="text/html; charset=gb2312" language="java"%>
<%@ page contentType="text/html; charset=utf-8" language="java"%>
<%@ include file="content.jsp"%>
<%response.sendRedirect("main.jsp");%>