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');   //创建层dialogDiv
	document.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.οnclick=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.οnclick=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.οnclick=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;
}

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