您的位置:首页 > Web前端 > JavaScript

js实现网页在线聊天功能(二)

2016-04-05 09:42 731 查看
/*************

第三步步:主体变量赋值

*************/

function set_str(){

_str="";

_str=_str+'<!--头部开始-->';

_str=_str+'<div id="MAIN_DIV_0001_WJL_HEAD" style="float:left;cursor:pointer;width:390px;height:37px; background-image:url('+_url+'Chat/img/title.jpg); overflow:hidden;" onMouseDown=moveInit("MAIN_DIV_0001_WJL",event) onMouseMove=Move("MAIN_DIV_0001_WJL",event)
onMouseUp=stopMove() onMouseOut=stopMove()>';

_str=_str+'<div id="MAIN_DIV_0001_WJL_HEAD_IMG" style="float:left;width:50px;height:37px; padding-top:3px;" align="center">';

_str=_str+'<img src="'+_url+'Chat/img/head.jpg" width="30" height="30">';

_str=_str+'</div>';

_str=_str+'<div id="MAIN_DIV_0001_WJL_HEAD_INFOR" style="float:left;width:304px;height:37px; padding-top:5px; font-size:12px" align="left">';

_str=_str+'<div style="float:left;"><img src="'+_url+'Chat/img/enter.jpg" width="20" height="20" align="absmiddle"></div>';

_str=_str+'<div id="MAIN_DIV_0001_WJL_HEAD_ENTER_NAME" style="color:#4c4c4c;float:left;padding-top:5px;padding-left:5px;">'+ _RNAME +'</div>';

_str=_str+'<div id="MAIN_DIV_0001_WJL_HEAD_ENTER_TYPE" style="color:#4c4c4c;float:left;padding-top:5px;padding-left:5px;">['+ _RTYPE +']</div>';

_str=_str+'</div>';

_str=_str+'<div id="MAIN_DIV_0001_WJL_HEAD_CLOSE" style="float:left;width:35px;height:37px; padding-top:0px;" align="center">';

_str=_str+'<img src="'+_url+'Chat/img/close.jpg" width="35" height="14" title="点击关闭聊天!" onClick="CloseChat()">';

_str=_str+'</div>';

_str=_str+'</div>';

_str=_str+'<!--头部结束-->';

_str=_str+'<!--查看信息开始-->';

_str=_str+'<div id="MAIN_DIV_0001_WJL_MESSAGE" style="width:390px;height:163px;scrollbar-face-color: #E0EEF8; scrollbar-highlight-color:#E0EEF8;overflow-x:hidden;overflow:scroll;scrollbar-3dlight-color: #FFFFFF; scrollbar-arrow-color:#38B0C1;scrollbar-track-color:
#fcfcfc; scrollbar-darkshadow-color:#fcfcfc;font-size:12px;padding:5px;" align="left">';

//_str=_str+'<iframe src="Chat/NowMessage.html" height="163" width="390" name="Lookinfor" id="Lookinfor" frameborder="no" border=0 marginheight="0" marginwidth="0"></iframe>';

_str=_str+'</div>';

_str=_str+'<!--查看信息结束-->';

_str=_str+'<!--工具开始-->';

_str=_str+'<div id="MAIN_DIV_0001_WJL_TOOL" style="width:390px;height:20px;overflow:hidden; background-color:#E0EEF8;">';

_str=_str+'<div style="float:left; width:50px;height:20px;overflow:hidden;" align="center"><img src="'+_url+'Chat/img/biaoqing.jpg" width="20" height="20" style="cursor:pointer;" title="插入表情" onClick="CreateImgDiv();"></div>';

_str=_str+'<div style="float:left;width:240px;"></div>';

_str=_str+'<div style="float:left;width:100px;" align="center">';

_str=_str+'<div style="float:left;width:20px;padding-top:2px; overflow:hidden;"><img src="'+_url+'Chat/img/mymasg.jpg" width="20" height="17"></div>';

_str=_str+'<div style="float:left;width:60px;font-size:12px; padding-top:4px;overflow:hidden;" align="left"><a style="cursor:pointer;"href="'+_url+'CAS/allmymessage.jsp" target="_blank" title="查看历史消息记录">消息记录</a></div>';

_str=_str+'</div>';

_str=_str+'</div>';

_str=_str+'<!--工具结束-->';

_str=_str+'<!--编辑开始-->';

_str=_str+'<div id="MAIN_DIV_0001_WJL_EDIT" style="MAIN_DIV_0001_WJL_EDIT_ss" style="scrollbar-face-color: #E0EEF8; scrollbar-highlight-color:#E0EEF8;overflow-x:hidden;overflow:scroll;width: 390px;scrollbar-3dlight-color: #FFFFFF; scrollbar-arrow-color:#38B0C1;scrollbar-track-color:
#fcfcfc; scrollbar-darkshadow-color:#fcfcfc;height: 75px" align="left">';

//

_str=_str+'<iframe src="'+_url+'Chat/Edit.html" height="5000" width="390" id="Editr_wjl_001_E" name="Editr_wjl_001_E" onload="Edit();" frameborder="no" border=0 marginheight="0" marginwidth="0"></iframe>';

_str=_str+'</div>';

_str=_str+'<!--编辑结束-->';

_str=_str+'<!--编辑开始-->';

_str=_str+'<div id="MAIN_DIV_0001_WJL_EDIT" style="width:390px;height:30px;overflow:hidden;background-color:#E0EEF8;">';

_str=_str+'<div style="float:left;width:240px; padding-top:5px; font-size:12px; color:#4c4c4c;" align="left"><input name="TYPE_Mess_wjl" id="TYPE_Mess_wjl" type="checkbox" onClick="CGTYPE();" checked><span id="USE_SEND_TYPE_WJL_001_I">使用Ctrl+Enter发送</span></div>';

_str=_str+'<div style="float:left;width:150px; padding-top:4px;" align="center"><input name="send_Mess_wjl" id="send_Mess_wjl" type="button" value="发送(S)" onClick="b_send();"><input name="close_Mess_wjl" id="close_Mess_wjl" type="button" value="关闭(C)"
onClick="CloseChat()"></div>';

return _str;

}

/***移动DIV

用法onMouseDown="moveInit('movediv',event);" onMouseMove="Move('movediv',event)" onMouseUp="stopMove()" onMouseOut="stopMove()"

****/

function moveInit(divID,evt){

_IsMousedown = 1;

if(getBrowserType() == "NSupport"){

return;

}

var obj = getObjById(divID);

if(getBrowserType() == "fox"){

_ClickLeft = evt.pageX - parseInt(obj.style.left);

_ClickTop = evt.pageY - parseInt(obj.style.top);

}else{

_ClickLeft = evt.x - parseInt(obj.style.left);

_ClickTop = evt.y - parseInt(obj.style.top);

}

}

function Move(divID,evt){

var s=document.getElementById("IMG_WJL_CHAT_CET");

if(s){

CloseDiv(_Imgdiv);

}

if(_IsMousedown == 0){

return;

}

var objDiv = getObjById(divID);

if(getBrowserType() == "fox"){

if(evt.pageX - _ClickLeft<=0){

objDiv.style.left = 0;

}else{

if(evt.pageX - _ClickLeft + 391 >=document.body.scrollWidth){

objDiv.style.left = document.body.scrollWidth-390;

}else{

objDiv.style.left = evt.pageX - _ClickLeft;

}

}

if(evt.pageY - _ClickTop<=0){

objDiv.style.top = 0;

}else{

if(evt.pageY - _ClickTop + 328>=document.body.scrollHeight){

objDiv.style.top = document.body.scrollHeight-328;

}else{

objDiv.style.top = evt.pageY - _ClickTop;

}

}

}else{

if(evt.x - _ClickLeft<=0){

objDiv.style.left = 0;

}else{

if(evt.x - _ClickLeft + 391 >=document.body.scrollWidth){

objDiv.style.left = document.body.scrollWidth-390;

}else{

objDiv.style.left = evt.x - _ClickLeft;

}

}

if(evt.y - _ClickTop<=0){

objDiv.style.top = 0;

}else{

if(evt.y - _ClickTop + 328>=document.body.scrollHeight){

objDiv.style.top = document.body.scrollHeight-328;

}else{

objDiv.style.top = evt.y - _ClickTop;

}

}

}

}

function stopMove(){

_IsMousedown = 0;

}

function getObjById(id){

return document.getElementById(id);

}

function getBrowserType(){

var browser=navigator.appName;

var b_version=navigator.appVersion;

var version=parseFloat(b_version);

if ((browser=="Netscape")){

return "fox";

}else if(browser=="Microsoft Internet Explorer"){

return "ie";

}else{

return "NSupport";

}

}

//关闭DIV

function CloseDiv(divobj)

{

divobj.parentNode.removeChild(divobj);

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: