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

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

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.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;
}