欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript实现留言板功能

程序员文章站 2022-12-01 19:47:55
html代码

    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();  
            }  
        }