留言板JavaScript实现

柔情只为你懂 2022-05-27 12:36 156阅读 0赞

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