javascript聊天盒/信使脚本

我正试图写一个类似facebook的聊天室，但我遇到了一个小问题。 我正在使用以下代码（这只是测试代码，所以不是很干净）：

css代码：

#messenger {
  position: fixed;
  bottom: 0px;
  right: 10px;
  width: 200px;
  height: 300px;
  z-index: 4;
  background-color: #ECECEC;
  border: 1px solid #000;
}
#messenger.p {
  text-align: right;
}
#contacts {
  margin: 5px 5px 5px 5px;
}
#chatspace {
  position: fixed;
  bottom: 0px;
  right: 240px;
  height: 20px;
  left: 20px;
  background-color: #ECECEC;
  border: 1px solid #000;
  z-index: 4;
}
.chatbox {
  position: absolute;
  bottom: 0px;
  width: 200px;
  height: 200px;
  z-index: 4;
  background-color: #ECECEC;
  border: 1px solid #000;
}

html/javascript代码：

<script type="text/javascript">
var i = 0;

function oc_chatbox() {

  if (i == 0) {
  document.getElementById('contacts').style.visibility = 'hidden';
  document.getElementById('messenger').style.height = '20px';
  i = 1;
  }

  else {
  document.getElementById('contacts').style.visibility = 'visible';
  document.getElementById('messenger').style.height = '300px';
  i = 0;
  }
}

function new_chat(userid) {
  var new_right;
  new_right = document.getElementById('messenger').style.right;
  //alert('old value: '+ new_right);
  new_right += 20;
  //alert('New value of right: '+ new_right);
  document.getElementById('chatspace').innerHTML = '<div id="'+userid+'" class="chatbox" style="right: '+new_right+'px;"></div>';
  //document.write('<div id="'+userid+'" class="chatbox" style="right: '+new_right+'px;"></div>');
}
</script>
<div id="chatspace"></div>
<div id="messenger">
 <p><a href="#" onclick="oc_chatbox();">Collapse</a></p>
 <div id="contacts">
 <ul>
  <li><a href="#" onclick="new_chat('contact_a');">contact A</a></li>
 </ul>
 </div>
</div>

var i=0；
函数oc_chatbox（）{
如果（i==0）{
document.getElementById（'contacts'）.style.visibility='hidden'；
document.getElementById（'messenger'）.style.height='20px'；
i=1；
}
否则{
document.getElementById（'contacts'）.style.visibility='visible'；
document.getElementById（'messenger'）.style.height='300px'；
i=0；
}
}
新聊天功能（用户ID）{
var new_right；
new_right=document.getElementById（'messenger'）.style.right；
//警报（“旧值：”+新值右侧）；
新_右+=20；
//警报（“新的权限值：”+新的权限）；
document.getElementById（'chatspace'）。innerHTML=''；
//文件。写（“”）；
}

问题是，当我尝试在聊天栏中添加新聊天时，我似乎无法将它们放在一起。 有人能帮忙吗

编辑：

因此，我改为javascript代码：

var last = null;
function new_chat(userid) {
  if(userid==null)
    userid = "user666";
  var new_right;
  var margin = 10;
  var messenger = window.last==null?document.getElementById('messenger'):window.last;  //Take the messenger or the last added chat
  new_right = document.body.clientWidth-messenger.offsetLeft;      //Compute the window size
  console.log(new_right);                                //Log the number
  new_right += margin;                                   //keep spaces between divs

  var newChat = document.createElement("div");           //DOM create DIV
  newChat.id = userid;
  newChat.className = "chatbox shadow";
  newChat.style.right = new_right+"px";
  newChat.innerHTML = '<p>'+userid+'</p><p><textarea></textarea></p>';
  window.last = newChat;  //Remember whichever is last
  document.body.appendChild(newChat);
} 

var last=null；
新聊天功能（用户ID）{
if（userid==null）
userid=“user666”；
var new_right；
var保证金=10；
var messenger=window.last==null？document.getElementById（'messenger'）：window.last；//使用messenger或上次添加的聊天记录
new_right=document.body.clientWidth-messenger.offsetLeft；//计算窗口大小
console.log（新的右）；//记录号码
new_right+=margin；//在div之间保留空格
var newChat=document.createElement（“div”）；//DOM create div
newChat.id=userid；
newChat.className=“聊天盒阴影”；
newChat.style.right=new_right+“px”；
newChat.innerHTML=''+userid+'
'；
window.last=newChat；//记住最后一个
document.body.appendChild（newChat）；
} 

---

现在它工作了，谢谢

您应该尝试添加浮动样式

.chatbox {
  float: right;
}

将其添加到聊天室样式中。您可能需要稍微弄乱一下，以确保浮动不会弄乱其他元素。你可能需要一个更好的容器

---

如果您想获得真正的乐趣，可以从jQuery中添加.draggable（），并将它们捕捉到聊天栏中。然后，您可以更改聊天的顺序

除非样式已设置且有效，否则无法使用其样式获得元素右偏移。相反，您必须获取

元素.offsetLeft

和窗口区域的大小，然后执行以下操作：

new_right = windowSize()[0]-messenger.offsetLeft;

窗口大小在哪里

这是我的，正在工作的，您的函数版本：

var last = null;
function new_chat(userid) {
  if(userid==null)
    userid = "user666";
  var new_right;
  var margin = 20;
  var messenger = window.last==null?document.getElementById('messenger'):window.last;  //Take the messenger or the last added chat
  new_right = windowSize()[0]-messenger.offsetLeft;      //Compute the window size
  console.log(new_right);                                //Log the number
  new_right += margin;                                   //keep spaces between divs

  var newChat = document.createElement("div");           //DOM create DIV
  newChat.id = userid;
  newChat.className = "chatbox";
  newChat.style.right = new_right+"px";
  window.last = newChat;  //Remember whichever is last
  document.body.appendChild(newChat);
} 

如果在浏览器中未定义

控制台

，则可能会出现错误。但在这种情况下，你应该选择更好的浏览器。通常，if（console！=null）被放入代码中。

---

您应该使用

document.createElement

和

HTMLElement.appendChild

方法来创建元素并将它们添加到HTML中。它更清晰，更容易调试。非常有用，现在查阅一些文档您可以在我的回复中看到简单的使用示例。将DOM元素视为

对象

并将其作为

对象

而不是字符串进行操作是很重要的。如何防止为单个联系人打开多个窗口？请使用

[]

而不是

新数组

。非常感谢，我已经得到了足够的提示和技巧来开始这方面的工作：请注意，我确实将聊天框附加到

document.body

而不是

聊天空间

，因为它应该与

messenger处于同一级别。