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

  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值