- 浏览: 99872 次
- 性别:
- 来自: 重庆
文章分类
最新评论
-
bluethink:
支持楼主,我也在学习javascript,感觉这东西很神奇,呵 ...
***** JavaScript 面向对象 之 对象全解 [半原创] ***** -
linhong_1001:
断开式,第一次听到这样的称呼
Jsp_Servlet_JavaBean_Chapter3,4理论笔记 -
liufangmeng:
就是session里的id判断和地址对比
基于SSH的单用户单账户登录全过程。 -
topcss:
引用
zouguibao 发送至 我
显示详细信息 7月16 ...
基于SSH的单用户单账户登录全过程。 -
topcss:
yisafe 写道貌似太简单的介绍了!如果做出一个基于SSH的 ...
基于SSH的单用户单账户登录全过程。
聊天室设计页面
JSP 项目中涉及到一个聊天室,到网上找了一下,以前别人做过了很多种(包括Java ,C# ,PHP 等),但UI 层窗口大小都是固死了的,于是自己重新做了一个可以随窗体大小改变的的聊天室:
代码兼容:Firefox ,IE 6+
时间:-6-13 晚从画图到代码完成一个个半小时
先看伪设计图:
参照附件 聊天室设计页面计算方式.JPG
下面UI 层代码:
<! 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" xml : lang ="en" lang ="en">
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=GBK" />
< script type ="text/javascript" src ="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></ script >
< script type ="text/javascript">
// 窗口大小
var winWidth = 0;
var winHeight = 0;
$(function (){
// 加载完成后
$(window).bind('load' ,init);
// 当窗体大小改变后
$(window).bind('resize' ,function (){
init();
scrollToButtom();
});
// 设置内容层样式
$("#content" ).bind('mouseout' ,function (){
this .style.borderColor= '#ccc'
}).bind('mouseover' ,function (){
this .style.borderColor= '#808080'
})
$("#rightsidebar>ul>li" ).bind('click' ,function (){
$.each(this .parentNode.childNodes,function (i,j){
$(j).css({"color" :"#000" });
});
$(this ).css({"color" :"#808080" });
document.getElementById('who' ).innerHTML = this .childNodes[0].childNodes[0].innerHTML;
}).bind('mouseout' ,function (){
this .style.backgroundColor='#fff' ;
}).bind('mouseover' ,function (){
this .style.backgroundColor='#ddd' ;
});
});
// 初始化
function init(){
winWidth = getWindowScroll()["width" ];
winHeight = getWindowScroll()["height" ];
// 计算出列表层的高度和高度计算方式参照:设计图
var listViewHeight = winHeight - (8*2 + 1*2 + 3*2 + 102 + 27 + 3*2 + 2 + 16);
var listViewLeft = winWidth - (8*2 + 1*2 + 3*2 + 282 + 3 + 2 + 3);
// 做最小值处理
listViewLeft = listViewLeft > 280 ? listViewLeft : 280;
listViewHeight = listViewHeight > 300 ? listViewHeight : 300;
// 为列表层设值
$("#leftsidebar" ).css({"width" : listViewLeft});
$("#rightsidebar" ).css({"width" : 280});
$("#leftsidebar" ).css({"height" : listViewHeight});
$("#rightsidebar" ).css({"height" : listViewHeight});
}
/**
* 得到WindowScroll 的值
*/
function getWindowScroll(){
var T, L, W, H, win = window, dom = document.documentElement, doc = document.body;
T = dom && dom.scrollTop || doc && doc.scrollTop || 0;
L = dom && dom.scrollLeft || doc && doc.scrollLeft || 0;
if (win.innerWidth){
W = win.innerWidth;
H = win.innerHeight;
}else {
W = dom && dom.clientWidth || doc && doc.clientWidth;
H = dom && dom.clientHeight || doc && doc.clientHeight;
}
return { top: T, left: L, width: W, height: H };
}
/****************** 下面为:业务逻辑代码 *********************/
// 验证
function goValidate(){
if (document.getElementById('who' ).innerHTML.length < 2){
alert(' 请选择发送的用户!' );
return false ;
} else if (document.getElementById("content" ).value.length < 3){
alert(' 至少发送3 个字' );
return false ;
} else {
setTimeout(send, 500);
}
}
// 发送
function send(){
$('#leftsidebar' ).html($('#leftsidebar' ).html() +
"<br /><span style='color:blue;'> 我对<span style='font-weight: bold;'>" + $("#who" ).text() +
"</span> 说:</span><br /><span style='margin-left:20px;line-height:30px;'>" + $("#content" ).val() +
"</span>" );
$("#content" ).val("" );
scrollToButtom();
}
// 设置滚动条的位置
function scrollToButtom(){
document.getElementById("leftsidebar" ).scrollTop = document.getElementById("leftsidebar" ).scrollHeight;
}
</ script >
< style type ="text/css">
/* 全局样式*/
body {margin :0 ; padding :0 ; width :100% ; height :100% ; background :#eee ;}
div {margin :3px ; }
/* 容器- Div 样式*/
#wrap {margin :8px ; border :1px solid #000 ; background :#fff ;}
#header {clear : both ; margin-bottom :6px !important ; margin :0 ; border :0 ; }
#leftsidebar {float :left ; border :1px solid #000 ; overflow-y :scroll ;}
#rightsidebar {width :280px ; margin-left :auto ; border :1px solid #000 ; overflow-y :scroll ;}
#shop {height :25px ; border :1px solid #000 ;}
#footer {height :100px ; border :1px solid #000 ;}
/* 功能- Div 样式*/
#content {width :99.5% ; height :50px ; border :2px solid #ccc ;}
#rightsidebar { }
#rightsidebar ul {list-style :none ; }
#rightsidebar ul li {border-top :1px solid #e1e1e1 ; height :40px ; line-height : 40px ; margin-left :-40px !important ; margin-left :2px ; }
#rightsidebar ul li div {background-position : 5px 5px ;padding-left :55px ;}
</ style >
</ head >
< body >
<!-- 最外层-->
< div id ="wrap">
<!-- 列表层[1] -->
< div id ="header">
<!-- 消息层[ 左] -->
< div id ="leftsidebar"> </ div >
<!-- 在线层[ 右] -->
< div id ="rightsidebar">
< ul >
< li title ="">< div style ="background:url(images/0.jpg) no-repeat;">< a href ="javascript:void(0);"> 邂逅思维/yl</ a > [BOOS1]</ div ></ li >
< li title ="">< div style ="background:url(images/1.jpg) no-repeat;">< a href ="javascript:void(0);"> 陸貳璇鉉</ a > [...]</ div ></ li >
< li title ="">< div style ="background:url(images/2.jpg) no-repeat;">< a href ="javascript:void(0);"> 天哪</ a > [ 和天天一伙的]</ div ></ li >
< li title ="">< div style ="background:url(images/3.jpg) no-repeat;">< a href ="javascript:void(0);"> /v 西门吹雪</ a > [BOOS1]</ div ></ li >
< li title ="">< div style ="background:url(images/4.jpg) no-repeat;">< a href ="javascript:void(0);"> 辉仔/love</ a > [ 整Java ,同行!]</ div ></ li >
< li title ="">< div style ="background:url(images/5.jpg) no-repeat;">< a href ="javascript:void(0);"> 魂牽夢境</ a > [ 一个女Java 人]</ div ></ li >
< li title ="">< div style ="background:url(images/6.jpg) no-repeat;">< a href ="javascript:void(0);"> 草帽崽儿</ a > [oneself]</ div ></ li >
< li title ="">< div style ="background:url(images/7.jpg) no-repeat;">< a href ="javascript:void(0);"> 晃晃悠悠</ a > [BOOS1]</ div ></ li >
< li title ="">< div style ="background:url(images/8.jpg) no-repeat;">< a href ="javascript:void(0);"> olinalv[ 吕]</ a > [ 恩,神秘!]</ div ></ li >
< li title ="">< div style ="background:url(images/9.jpg) no-repeat;">< a href ="javascript:void(0);"> 若尘</ a > [BOOS1]</ div ></ li >
< li title ="">< div style ="background:url(images/5.jpg) no-repeat;">< a href ="javascript:void(0);"> 斩梦人·天天</ a > [BOOS1]</ div ></ li >
< li title ="">< div style ="background:url(images/2.jpg) no-repeat;">< a href ="javascript:void(0);"> ^_^ 芹</ a > [ 美工MM]</ div ></ li >
< li title ="">< div style ="background:url(images/7.jpg) no-repeat;">< a href ="javascript:void(0);"> 龌龊</ a > [ 人如其名]</ div ></ li >
< li title ="">< div style ="background:url(images/3.jpg) no-repeat;">< a href ="javascript:void(0);"> 史前一猛男</ a > [ 猛就一个字]</ div ></ li >
</ ul >
</ div >
</ div >
<!-- 功能层-->
< div id ="shop"> 发送给:< span id ="who"> 所有人</ span ></ div >
<!-- 发送层-->
< div id ="footer">
< div >< textarea id ="content"></ textarea ></ div >
< div >
< span style ="float:left;">< a href ="javascript:void(0);"> 来自学术部的周星驰上线了!</ a ></ span >
< span style ="float:right;">
< input type ="button" value =" 取消" />
< input type ="button" value =" 发送" onClick ="goValidate()" />
</ span >
</ div >
</ div >
</ div >
</ body >
</ html >
评论
呵呵,谢谢提醒,刚刚发现我贴的代码如果直接复制会产生很多空格,马山加一个截图和重新传一份代码。
<!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script type="text/javascript"> // 窗口大小 var winWidth = 0; var winHeight = 0; $(function(){ // 加载完成后 $(window).bind('load',init); // 当窗体大小改变后 $(window).bind('resize',function(){ init(); scrollToButtom(); }); // 设置内容层样式 $("#content").bind('mouseout',function(){ this.style.borderColor= '#ccc' }).bind('mouseover',function(){ this.style.borderColor= '#808080' }) $("#rightsidebar>ul>li").bind('click',function(){ $.each(this.parentNode.childNodes,function(i,j){ $(j).css({"color":"#000"}); }); $(this).css({"color":"#808080"}); document.getElementById('who').innerHTML = this.childNodes[0].childNodes[0].innerHTML; }).bind('mouseout',function(){ this.style.backgroundColor='#fff'; }).bind('mouseover',function(){ this.style.backgroundColor='#ddd'; }); }); // 初始化 function init(){ winWidth = getWindowScroll()["width"]; winHeight = getWindowScroll()["height"]; // 计算出 列表层的高度和高度 计算方式参照:设计图 var listViewHeight = winHeight - (8*2 + 1*2 + 3*2 + 102 + 27 + 3*2 + 2 + 16); var listViewLeft = winWidth - (8*2 + 1*2 + 3*2 + 282 + 3 + 2 + 3); // 做最小值处理 listViewLeft = listViewLeft > 280 ? listViewLeft : 280; listViewHeight = listViewHeight > 300 ? listViewHeight : 300; // 为 列表层设值 $("#leftsidebar").css({"width": listViewLeft}); $("#rightsidebar").css({"width": 280}); $("#leftsidebar").css({"height": listViewHeight}); $("#rightsidebar").css({"height": listViewHeight}); } /** * 得到 WindowScroll 的值 */ function getWindowScroll(){ var T, L, W, H, win = window, dom = document.documentElement, doc = document.body; T = dom && dom.scrollTop || doc && doc.scrollTop || 0; L = dom && dom.scrollLeft || doc && doc.scrollLeft || 0; if(win.innerWidth){ W = win.innerWidth; H = win.innerHeight; }else{ W = dom && dom.clientWidth || doc && doc.clientWidth; H = dom && dom.clientHeight || doc && doc.clientHeight; } return { top: T, left: L, width: W, height: H }; } /****************** 下面为:业务逻辑代码 *********************/ //验证 function goValidate(){ if(document.getElementById('who').innerHTML.length < 2){ alert('请选择发送的用户!'); return false; } else if(document.getElementById("content").value.length < 3){ alert('至少发送 3 个字'); return false; } else { setTimeout(send, 500); } } //发送 function send(){ $('#leftsidebar').html($('#leftsidebar').html() + "<br /><span style='color:blue;'>我对 <span style='font-weight: bold;'>" + $("#who").text() + "</span> 说:</span><br /><span style='margin-left:20px;line-height:30px;'>" + $("#content").val() + "</span>"); $("#content").val(""); scrollToButtom(); } //设置滚动条的位置 function scrollToButtom(){ document.getElementById("leftsidebar").scrollTop = document.getElementById("leftsidebar").scrollHeight; } </script> <style type="text/css"> /* 全局样式 */ body {margin:0; padding:0; width:100%; height:100%; background:#eee;} div {margin:3px; } /* 容器 - Div样式 */ #wrap {margin:8px; border:1px solid #000; background:#fff;} #header {clear: both; margin-bottom:6px !important; margin:0; border:0; } #leftsidebar {float:left; border:1px solid #000; overflow-y:scroll;} #rightsidebar {width:280px; margin-left:auto; border:1px solid #000; overflow-y:scroll;} #shop {height:25px; border:1px solid #000;} #footer {height:100px; border:1px solid #000;} /* 功能 - Div样式 */ #content {width:99.5%; height:50px; border:2px solid #ccc;} #rightsidebar { } #rightsidebar ul {list-style:none; } #rightsidebar ul li {border-top:1px solid #e1e1e1; height:40px; line-height: 40px; margin-left:-40px !important; margin-left:2px; } #rightsidebar ul li div {background-position: 5px 5px;padding-left:55px;} /* #rightsidebar ul li {border-top:1px solid #e1e1e1; height:40px; line-height: 40px;} #rightsidebar ul li div {background-position: 5px 5px;height: 40px;line-height:40px;padding-left:60px;} */ </style> </head> <body> <!-- 最外层 --> <div id="wrap"> <!-- 列表层[1] --> <div id="header"> <!-- 消息层[左] --> <div id="leftsidebar"> </div> <!-- 在线层[右] --> <div id="rightsidebar"> <ul> <li title=""><div style="background:url(images/0.jpg) no-repeat;"><a href="javascript:void(0);">邂逅思维/yl</a>[BOOS1]</div></li> <li title=""><div style="background:url(images/1.jpg) no-repeat;"><a href="javascript:void(0);">陸貳璇鉉</a>[...]</div></li> <li title=""><div style="background:url(images/2.jpg) no-repeat;"><a href="javascript:void(0);">天哪</a>[和天天一伙的]</div></li> <li title=""><div style="background:url(images/3.jpg) no-repeat;"><a href="javascript:void(0);">/v西门吹雪</a>[BOOS1]</div></li> <li title=""><div style="background:url(images/4.jpg) no-repeat;"><a href="javascript:void(0);">辉仔/love</a>[整Java,同行!]</div></li> <li title=""><div style="background:url(images/5.jpg) no-repeat;"><a href="javascript:void(0);">魂牽夢境</a>[一个女Java人]</div></li> <li title=""><div style="background:url(images/6.jpg) no-repeat;"><a href="javascript:void(0);">草帽崽儿</a>[oneself]</div></li> <li title=""><div style="background:url(images/7.jpg) no-repeat;"><a href="javascript:void(0);">晃晃悠悠</a>[BOOS1]</div></li> <li title=""><div style="background:url(images/8.jpg) no-repeat;"><a href="javascript:void(0);">olinalv[吕]</a>[恩,神秘!]</div></li> <li title=""><div style="background:url(images/9.jpg) no-repeat;"><a href="javascript:void(0);">若尘</a>[BOOS1]</div></li> <li title=""><div style="background:url(images/5.jpg) no-repeat;"><a href="javascript:void(0);">斩梦人·天天</a>[BOOS1]</div></li> <li title=""><div style="background:url(images/2.jpg) no-repeat;"><a href="javascript:void(0);">^_^芹</a>[美工MM]</div></li> <li title=""><div style="background:url(images/7.jpg) no-repeat;"><a href="javascript:void(0);">龌 龊</a>[人如其名]</div></li> <li title=""><div style="background:url(images/3.jpg) no-repeat;"><a href="javascript:void(0);">史前一猛男</a>[猛就一个字]</div></li> </ul> </div> </div> <!-- 功能层2 --> <div id="shop">发送给:<span id="who">所有人</span></div> <!-- 发送层3 --> <div id="footer"> <div><textarea id="content"></textarea></div> <div> <span style="float:left;"><a href="javascript:void(0);">来自 学术部 的 周星驰 上线了!</a></span> <span style="float:right;"> <input type="button" value="取 消" /> <input type="button" value="发 送" onClick="goValidate()" /> </span> </div> </div> </div> </body> </html>
相关推荐
基于web的聊天室课程设计 前台聊天室页面:为用户提供聊天场所,可对网站风格、广告链接等进行设置;用户可以根据个人习惯选择字体、文字颜色和表情等;具有私聊功能,私聊内容仅私聊双方可见;可手动清除聊天内容。
本项目是基于Node.js开发的实时在线聊天室设计源码,包含61个文件,其中包括24个JavaScript文件,8个Vue组件文件,6个JPG图片,5个XML文件,4个Map文件,2个HTML页面,2个CSS样式文件,2个PNG图片,以及1个Babel配置...
本课程设计通过一个聊天室,向读者介绍了JSP的内置对象(包括Session对象、Application对象、request对象和response对象)、Ajax技术、集合类中的Vector类以及JavaBean技术的实际应用。通过本章的学习,可以加深对...
1.绪论 4 1.1研究背景 4 1.2发展现状 4 1.3主要的内容 5 2.开发工具及相关技术介绍 6 ...5.3聊天室界面 14 5.4服务器显示界面 14 6.系统测试 16 6.1系统调试的目的和意义 16 6.2功能测试用例 16 7总结 17 致谢 19
ajax无刷新简单聊天室 ajax无刷新简单聊天室
实现了聊天室系统,功能包括用户登录、自动注册、用户发言、实时浏览发言、... \MyChatRoom\Main.aspx 聊天室主页面 \MyChatRoom\ShowMessage.aspx 浏览留言页面 \MyChatRoom\Speak.aspx 发表留言页面
ASP简易聊天室源码 绍兴人聊天室改进 毕业设计
随着Internet技术的飞速发展,网络已经成为人们生活中不可缺少的一部分...本次课程设计的目的就是编写一个无刷新的聊天室,该聊天室不但可以实时显示在线人员列表及聊天内容,而且增加了聊天表情和文字颜色选择的功能。
基于jsp的网络聊天室设计与实现
聊天室的设计包括:用户进行登录,选择聊天室,进行聊天,退出聊天室。 在聊天室中,用户只需输入一个用户名就可以进入聊天室,但是如果当前有人在使用该用户名,那么就必须换一个唯一的用户名。 具体要求: ...
计算机网络课程的课程设计,一个JAVA聊天室,很不错哦
本人自己用JSP和SQLServer2000做的在线聊天室,包含了数据库文件和JSP页面源码,拿了可以直接用。
聊天室系统的即时交流方式满足了网络中多人同时聊天交流的需要,使得较多的人在同一个聊天页面进行交流变得方便,简单。 本设计所完成的网络聊天室具有常用聊天室的所有功能,包括多人同时在线聊天、两人间的私密...
采用ASP.NET语言,有各种界面的源代码,登录页面的设计,确认页面的设计,还有注册页面等
使用Ajax技术实现聊天室程序。使用Ajax来动态获取聊天记录,可以避免屏幕不断刷新而出现的闪动现象,另外,使用Ajax也可以减少服务器端的负荷,对这种客户端与服务器端通信量极大的程序是非常有意义的。对用户来讲,...
小小聊天室的制作与设计小小聊天室的制作与设计
聊天室系统的即时交流方式满足了网络中多人同时聊天交流的需要,使得较多的人在同一个聊天页面进行交流变得方便,简单。 本设计所完成的网络聊天室具有常用聊天室的所有功能,包括多人同时在线聊天、两人间的私密...
用户登录通过判断,合法登录后可以在聊天室留下你想说的话。 5.2.2系统的功能特点 1).操作简单、界面简洁:完全控件式的页面布局 2).即时可见:对用户的留言将立即在主页的对应栏目显示出来,达到"即时见效"的功能...
菜单功能1、起始页面为loginchat.aspx2、填写昵称,点击选择聊天室3、随意选择一个聊天室,点击进入聊天室4、在最下方输入框中输入聊天内容,点击发送消息,即可发送到群聊窗口5、开启多个聊天窗口,用不同用户名...
计算机毕业设计中的网络聊天室系统是一个基于SpringBoot技术开发的实时通信平台,它利用SpringBoot的轻量级和自动配置特性,为用户打造了一个简洁、高效且易于部署的在线交流环境。该系统通常包含用户认证、私人聊天...