php+js+mysql设计的仿webQQ-<6>JS创建聊天窗口

<11>Js创建聊天窗口

先看一下效果图

所在页面的head中加入以下Js代码来定义全局变量

Js代码

<script type="text/javascript">var count=2,t=50,l=20;</script>

创建聊天窗口的Js代码

function createDialogDiv(obj){   count++;                //其中count为全局变量,用来决定层的堆叠顺序    var dialogID="chat"+obj.id;if(document.getElementById(dialogID)){          //检测对话框是否应经存在 alert("对话框已存在！");   }else{var dialogDiv=document.createElement('div');   //创建层dialogDivdocument.body.appendChild(dialogDiv);dialogDiv.id=dialogID;                  //给层dialogDiv设置属性dialogDiv.style.width='360px';dialogDiv.style.height='320px';dialogDiv.style.background="#006633";dialogDiv.style.position = "absolute";dialogDiv.style.top=t+ "px";      //t和下文的l为全局变量,用来确定层的位置dialogDiv.style.left=l + "px";var titleDiv=document.createElement('div');dialogDiv.appendChild(titleDiv);titleDiv.style.width='360px';titleDiv.style.height='30px';titleDiv.style.color="#FFFFFF";titleDiv.onclick=function(){      //当用鼠标点击该对话框时，该对话框到最上面count++;dialogDiv.style.zIndex=count;}var titleTable=document.createElement("table");titleDiv.appendChild(titleTable);titleTable.style.width="360px";titleTable.style.height="24px";var titleTr=document.createElement("tr");titleTable.appendChild(titleTr);var titleTd1=document.createElement("td");titleTr.appendChild(titleTd1);titleTd1.style.width="30px";var titleTd1Img=document.createElement("img");titleTd1.appendChild(titleTd1Img);titleTd1Img.style.width="24px";titleTd1Img.style.height="24px";titleTd1Img.src="avatar/"+ obj.id +".jpg";var titleTd2=document.createElement("td");titleTr.appendChild(titleTd2);titleTd2.style.width="300px";titleTd2.style.align="left";titleTd2.innerHTML=obj.id;var titleTd3=document.createElement("td");titleTr.appendChild(titleTd3);titleTd3.style.width="20px";var titleTd3Img=document.createElement("img");titleTd3.appendChild(titleTd3Img);titleTd3Img.style.width="16px";titleTd3Img.style.height="16px";titleTd3Img.style.cursor="pointer";titleTd3Img.title="关闭";titleTd3Img.src="chat/close.png";titleTd3Img.onclick=function(){     //当用鼠标点击关闭的图片时，清除创建的层dialogDiv.parentNode.removeChild(dialogDiv);}var chatDivID="to"+obj.id;var chatDiv=document.createElement('div');dialogDiv.appendChild(chatDiv);chatDiv.id=chatDivID;chatDiv.style.width='350px';chatDiv.style.height='180px';chatDiv.style.margin='0 auto';chatDiv.style.background="#FFFFFF";chatDiv.style.color="black";chatDiv.style.overflow="auto";refreshChatDiv(obj,chatDivID);    //该js方法用来刷新聊天信息var messageDiv=document.createElement('div');dialogDiv.appendChild(messageDiv);messageDiv.style.width='350px';messageDiv.style.height='100px';messageDiv.style.margin='5px auto';var messageText=document.createElement('textarea');messageDiv.appendChild(messageText);messageTextID="text"+obj.id;messageText.id=messageTextID;messageText.style.width='345px';messageText.style.height='70px';var messageTable=document.createElement("table");messageDiv.appendChild(messageTable);var messageTr=document.createElement("tr");messageTable.appendChild(messageTr);var messageTd1=document.createElement("td");messageTd1.style.width="290px";messageTr.appendChild(messageTd1);    var messageTd2=document.createElement("td");messageTr.appendChild(messageTd2);var messageSpan=document.createElement('span');messageTd1.appendChild(messageSpan);messageSpan.style.color="red";var messageButton=document.createElement("input");    messageTd2.appendChild(messageButton);messageButton.type="button";messageButton.style.color="#FFFFFF";messageButton.style.background="#006633";messageButton.style.cursor="pointer";messageButton.value="发送";messageButton.onclick=function(){if(document.getElementById(messageTextID).value==""){messageSpan.innerHTML="不能发送空消息！";}else{messageSpan.innerHTML="";var text=document.getElementById(messageTextID).value;sendMessage(obj,chatDivID,text);document.getElementById(messageTextID).value="";}}var h = document.documentElement.clientHeight - 340;//求浏览器的可见高度if(t<h){t=t+35;l=l+35;}else{t=60;l=50;} }dialogDiv.style.zIndex=count;}

欢迎大家拍砖！(未完待续)