用原生JS模拟一个聊天记录表

这是一个模拟聊天记录的案例，初学者可以通过本例对来加深JS的事件的熟悉和理解。
话不多说，我们先来看一下效果图吧。

下面开始说明怎么写吧。
HTML结构:

<div id="main" class="main">
    <ul id="content" class="content">
        <li class="msgContent left">你好</li>
        <div style="clear: both;"></div>
        <li class="msgContent left">这个是什么</li>
        <div style="clear: both;"></div>

        <li class="msgContent right">。。。。</li>
        <div style="clear: both;"></div>

        <!-- 当点击发送按钮，就在 ul 中添加一条消息记录 -->

    </ul>
    <textarea id="msg_input" class="msgInput"></textarea>
    <button id="sendbtn" class="sendbtn">发送</button>

先看看JS代码吧：

//获取节点
var oInput = document.getElementById("msg_input");
var oBtn = document.getElementById("sendbtn");
var oContent = document.getElementById("content");//ul

//点击发送
oBtn.onclick = function()
{
    //内容输出
    var str = oInput.value;//获取输入框的值
    var oLi = document.createElement("li");//创建li标签
    oLi.innerHTML = str;//节点内容
    oContent.appendChild(oLi);//把新建的li标签压入ul中

    //对li添加发送消息的样式
    oLi.className = "msgContent right";

    //清除li的浮动：
    oLi.style.clear = "both";

    //设置发送内容后输入框的数据清空：
    oInput.value = "";

    //保持当前节点对象在最可见区域
    oLi.scrollIntoView();
}

//按下Ctrl+Enter回车键完成发送
oInput.onkeydown = function(e)
{
    e = e || window.event;
    if (e.ctrlKey && e.keyCode == 13)
    {
        oBtn.onclick();//执行发送内容
    }
}

CSS样式（重点在JS，这只是一些美观样式）：

*{font-size: 14px; padding:0; margin:0;}/*实际开发不要用“*”符号*/

/*主体*/
.main{
    position: relative;
    margin: 20px auto;
    border: 1px solid steelblue;
    width: 430px;
    height: 400px;
}

/*输入框*/
.msgInput{
    display: block;
    width: 406px;
    height: 60px;
    margin: 10px auto;

}

/*按钮*/
.sendbtn{
    position: absolute;
    width: 100px;
    height: 29px;
    bottom: 5px;
    right: 10px;
}

/*内容*/
.content{
    list-style: none;
    width: 410px;
    height: 280px;
    margin: 5px auto;
    border: 1px dotted #D1D3D6;
    overflow-y: scroll;
}
.msgContent{
    width:auto;
    max-width: 250px;
    height: auto;
    word-break: break-all;
    margin: 5px;
    padding: 3px;
    border-radius: 5px;
}

.content .left{
    float: left;
    text-align: left;
    background-color: lightgrey;
}
.content .right{
    float: right;
    text-align: right;
    background-color: yellowgreen;
}

这只是一个很简单的例子。
下一篇博客会写如何在局域网内进行聊天。
（觉得好就【顶】一个）。