在线聊天室小程序

来源：互联网发布：我欲封天灵珠升阶数据编辑：程序博客网时间：2024/05/01 21:55

最近，学习了慕课网上的jQuery课程，其中jQuery基础中有一个小实例在线聊天室。本人从网上下载了源码，自己实现了下。

这个小程序的流程很简单，就是输入用户信息登陆到聊天界面，在聊天界面可以进行聊天，界面可以自动获取聊天记录，在线人员，可以实现下线功能。界面如下：

程序的部分前端代码

登陆页面部分：

<!DOCTYPE html><html>  <head>    <base href="<%=basePath%>">       <title>用户登录</title><script type="text/javascript" src="jquery-1.8.0.min.js"></script><style type="text/css">body{font-size:12px;text-align:center;}.content{width:350px;text-align:center;margin-top:110px;margin-left:auto;margin-right:auto; }.content div{margin-bottom:5px;}p{font-weight:bold;font-size:16px;}#spnMsg{background-color:#ffe0a3;display:none;}</style><script type="text/javascript">$(function($){$("#spnMsg").ajaxStart(function(){$(this).html("正在登陆.....").show();});$("#spnMsg").ajaxComplete(function(){$(this).html("").hide();});$("#btnlogin").click(function(){var $user=$("#username");var $pass=$("#password");$.ajax({type:"POST",url:"DealData.jsp",data:"action=login&d="+new Date()+"&name="+$user.val()+"&pwd="+$pass.val(),success:function(data){if(data.indexOf("True")>=0){window.location.href="chatMain.html";}else{alert("用户名或密码错误!");}}});});});</script>  </head>    <body>    <div class="content">    <p>用户登录</p>    <div><label>用户名：</label><input type="text" id="username" name="username"/></div>    <div><label>  密码：</label><input type="password" id="password" name="password"/></div>    <div><input type="button" value="登陆" id="btnlogin"></div>    <span id="spnMsg">Tip</span>    </div>  </body></html>

聊天室的前端代码为：

<!DOCTYPE html><html>  <head>    <title>聊天大厅</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">         <script language="javascript" type="text/javascript" src="jquery-1.8.0.min.js"></script><style type="text/css">body{text-align:center;padding-top:70px;font-size:12px;}.container{width:710px;height:380px;margin-left:auto;margin-right:auto;border:4px solid gray;}.topframe{margin-bottom:5px;}.chat{width:60%;float:left;}#txtchat{width:370px;height:230px;overflow-y:scroll;margin-left:20px;}.online{width:20%;float:left;margin-right:70px;}#txtonline{width:130px;height:230px;overflow-y:scroll;}#txtchat,#txtonline{border:1px solid black;text-align:left;padding-left:10px;padding-top:10px;line-height:20px;}.format{clear:both;}p{font-weight:bold;font-size:14px;}.bottomframe{text-align:left;margin-left:25px;}.bottomframe textarea{width:465px;height:50px;}.sendcontent span{display:block;float:right;margin-right:100px;margin-top:15px;}</style><script type="text/javascript">$(document).ready(function(){//键盘监听事件$(document).keypress(function(e){if(e.which==13){sendMessage();}});//读取消息getMessage();//读取在线用户getOnlineUser();//初始化表情initFace();//自动刷新AutoRefresh();//给表情添加点击事件$(".bottomframe image").click(function(){var $txtobj=$("#txtcontent");var contentstr="";if($txtobj.val()!=undefined){contentstr=$txtobj.val()+"<:"+this.id+":>";}else{contentstr="<:"+this.id+":>";}$("#txtcontent").val(contentstr);});//发送消息$("#send").bind("click",sendMessage);//下线$("#offline").click(function(){if(confirm("确定要下线吗？")){offline();}});});//初始化表情function initFace(){var imgstr="";for(var i=1;i<=7;i++){imgstr+="<image src='QQface/"+i+".gif' id='"+i+"'/>"}$(".imgframe").html(imgstr);}//读取消息function getMessage(){$.ajax({type:"POST",url:"DealData.jsp",data:"action=ChatList&d="+new Date(),success:function(data){if(data.indexOf("unLogin")>=0){alert("非法进入！");window.location.href="index.jsp";}else{$("#txtchat").html(data);}}});}//读取在线用户function getOnlineUser(){$.ajax({type:"POST",url:"DealData.jsp",data:"action=onLineList&d="+new Date(),success:function(data){$("#txtonline").html(data);}});}//发送消息function sendMessage(){$.ajax({type:"POST",url:"DealData.jsp",data:"action=SendContent&d="+new Date()+"&content="+$("#txtcontent").val(),success:function(data){if(data.indexOf("True")>=0){getMessage();$("#txtcontent").val("");gotoBottom();}else{alert("发送失败！");}}});}//下线function offline(){$.ajax({type:"POST",url:"DealData.jsp",data:"action=OffLine&d="+new Date(),success:function(data){if(data.indexOf("True")>=0){alert("下线成功");window.location.href="index.jsp";}}});}function gotoBottom(){var $chatdiv=$(".chat");$chatdiv.scrollTop=$chatdiv.scrollHeight;}//自动刷新function AutoRefresh(){setInterval(getMessage,2000);setInterval(getOnlineUser,4000);}</script>  </head>  <body>    <div class="container">    <div class="topframe">    <div class="chat">    <p>聊天大厅</p>    <div id="txtchat"></div>    </div>    <div class="online">    <p>当前在线人员</p>    <div id="txtonline"></div>    </div>    <div class="format"></div>    </div>    <div class="bottomframe">    <div class="imgframe"></div>    <div class="sendcontent">    <textarea id="txtcontent"></textarea>       <span><input type="button" value="发送" id="send"/>    <input type="button" value="下线" id="offline"/></span>       </div>    </div>    </div>  </body></html>

整个工程的源码下载地址http://download.csdn.net/detail/yanmei_yaomy/9172447

0 0