php+js+mysql设计的仿webQQ-<6>JS创建聊天窗口
2012-05-12 21:43 java线程例子 阅读(248) 评论(0) 编辑 收藏 举报<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.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; }
欢迎大家拍砖!(未完待续)