jq聊天框示例

html如下：

<section id="chat">
        <div class="chatBody"></div>
        <div><img src="images/icon.jpg"></div>
        <textarea class="chatText"></textarea>
        <div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
    </section>

css如下：

 * {
        margin: 0;
        padding: 0;
        line-height: 22px;
        font-family: "Arial", "微软雅黑";
    }

    #chat {
        margin: 3px auto 0 auto;
        width: 436px;
        border: 1px #999999 solid;
    }

    .chatBody {
        width: 100%;
        height: 220px;
        overflow: auto;
    }

    .chatText {
        border: none;
        width: 100%;
        height: 50px;
    }

    .btn {
        text-align: right;
    }

    .btn span {
        display: inline-block;
        padding: 0 10px;
        height: 25px;
        overflow: hidden;
        color: #ffffff;
        border-radius: 5px;
        background-color: #069dd5;
        font-size: 12px;
        margin-right: 3px;
        cursor: pointer;
    }

    .bb {
        background-color: #ccc;
        border-radius: 5px;
    }

jq如下：

<script>

        $(function () {

            $("#send").click(function () {

                //使用数组保存聊天者的头像和昵称
                let uName = ["泰罗", "迪迦", "赛文"];
                //随机获取头像和昵称
                let iNum = parseInt((Math.random() * 3) + 1);
                //设置昵称
                let userName = "<span style='color:blue'>" + uName[iNum - 1] + "</span>";
                //设置头像
                let headStr = "<img src=images/head0" + iNum + ".jpg style='vertical-align:middle'>";
                //获取输入框内容
                let text1 = $(" textarea").val();
                //判断输入框是否输入内容
                if (text1.trim().length !== 0) {
                    //获取聊天内容
                    let str = $(".chatBody").html();
                    //将输入框内容添加到聊天内容中
                    $(".chatBody").html(str + "<div id='aijquery1'>" + headStr + userName + "<p style='margin-left: 36px;'>" + text1 + "</p>" + "</div>");
                    $(".chatBody div p").addClass("bb");
                    $(" textarea").val("")
                    // 滚动条默认在底部
                    var n = $('.chatBody').height()
                    console.log($('.chatBody').height());
                    var a = $('.chatBody')[0].scrollHeight

                    console.log($('.chatBody')[0].scrollHeight);
                    var b = $('.chatBody')[0].scrollTop
                    console.log($('.chatBody')[0].scrollTop);
                    $('.chatBody').scrollTop($('.chatBody')[0].scrollHeight)
                    if (b + n > a) {
                        alert('di')
                    }

                }
                else {
                    alert('不能为空')
                }
            })
            // 回车事件
            $(document).keyup(function (event) {
                if (event.keyCode == 13) {
                    $("#send").trigger("click");

                }
            });
        })

    </script>