留言板JavaScript实现

html代码

<div id="main" class="main">
    <ul id="content" class="content">
        <li class="msgContent left">hello?</li>
        <div style="clear: both;"></div>
        <li class="msgContent left">hello</li>
        <div style="clear: both;"></div>
        <li class="msgContent right">hi</li>
        <div style="clear: both;"></div>
        <li class="msgContent left">hehe</li>
        <div style="clear: both;"></div>
        <li class="msgContent left">goodbye</li>
        <div style="clear: both;"></div>
        <li class="msgContent right">。。。。</li>
        <div style="clear: both;"></div>
        <li class="msgContent right">I LOVE YOU</li>
    </ul>
    <textarea id="msg_input" class="msgInput"></textarea>
    <button id="sendbtn" class="sendbtn">发送</button>
</div>

css代码

    * {
            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;
        }

        .clear {
            clear: both;
        }

JS代码

   var oBtn = document.getElementById("sendbtn");
    var msg = document.getElementById("msg_input");
    var oCon = document.getElementById("content");
    oBtn.onclick = function () {
        var msgVal = msg.value;
        var li = document.createElement("li");
        li.innerHTML = msgVal;
        li.className = "msgContent right";
        var div = document.createElement("div");
        div.className = "clear";
        oCon.appendChild(div);
        oCon.appendChild(li);
        msg.value = "";
        //可见范围看见当前元素
        li.scrollIntoView()
    };
    
    document.onkeypress = function (e) {
        var e = e || event;
        var code = e.keyCode || e.which;
        if (code == 10) {
            var msgVal = msg.value;
            var li = document.createElement("li");
            li.innerHTML = msgVal;
            li.className = "msgContent right";
            var div = document.createElement("div");
            div.className = "clear";
            oCon.appendChild(div);
            oCon.appendChild(li);
            msg.value = "";
            //可见范围看见当前元素
            li.scrollIntoView();
        }
    }