JS让一个DIV变成个聊天窗口

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <style type="text/css">
        #Chat
        {
            width: 550px;
            height: 200px;
            padding: 6px;
            overflow-y: scroll;
            word-break: break-all;
            background: #ccc;
        }
    </style>

    <script language="javascript" type="text/javascript">
    function $(c){return document.getElementById(c);}
     function SendMsgss()
     {
       var MSg= $("msg").value;
       var newFontElem = document.createElement("font");
      newFontElem.innerHTML =MSg+"<br/>";
      $("Chat").appendChild(newFontElem);
       $("Chat").scrollTop= $("Chat").scrollHeight;//每次收到消息吧滚动条拉到最下面

//       var MSg= $("msg").value; 这个更简单但是为了后台Ajax返回等。。。。
//       var msgK=$("Chat").innerHTML+=MSg+"<br/>";
     }
    </script>

</head>
<body>
    <form id="form1">
    <div id="Chat">
    </div>
    <input type="text" id="msg" />
    <input type="button" id="send" value="SendMsgss" onclick="SendMsgss()" />

    </form>
</body>
</html>

 

 

 查看实例

 

posted @ 2009-11-07 20:48  王大湿  阅读(889)  评论(0编辑  收藏  举报