当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript实现留言板功能

JavaScript实现留言板功能

2018年04月19日  | 移动技术网IT编程  | 我要评论

html代码

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

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代码

<strong>   </strong>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 p = document.createElement("p");  
        p.className = "clear";  
        oCon.appendChild(p);  
        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 p = document.createElement("p");  
            p.className = "clear";  
            oCon.appendChild(p);  
            oCon.appendChild(li);  
            msg.value = "";  
            //可见范围看见当前元素  
            li.scrollIntoView();  
        }  
    }

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网