[JavaScript知识库]QQ简易聊天框

?

?

css

*{
    margin: 0;
    padding: 0;
    line-height: 22px;
    font-family: "Arial", "微软雅黑",serif;
}
#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;
}
.chatBody div:first-of-type{
    float: left;
    width: 38px;
}
.chatBody p{
    float: left;
    font-size: 12px;
    width:370px;
    color: #0000ff;
}
.chatBody div:last-of-type{
    float: left;
    width: 370px
; font-size: 12px;
}
.chatBody section {
    clear: both;
}
.chatContent{
    background:#efefef;
    border-radius: 5px;
    padding: 3px;
}

HTML

<section id="chat">
    <div class="chatBody"></div>
    <div>
        <img src="../img/icon.jpg" alt="">
    </div>
    <textarea name="" class="chatText" id="" cols="30" rows="10"></textarea>
    <div class="btn">
        <span id="send2">关闭(c)</span>
        <span id="send">发送(s)</span>
    </div>
</section>

JQuery

$(function () {
        let uName =["张三","美女老司","李四"];//用户名
        let img = ["../img/head01.jpg","../img/head02.jpg","../img/head03.jpg"]//头像地址
        $("#send").click(function () {//点击发送按钮
            if($(".chatText").val().length>0){//判断当前输入框中是否有内容
                let str =$(".chatBody").html();//获取聊天框
                let iNum = Math.floor(Math.random()*3);//获取随机数
                let userName = "<p>"+uName[iNum]+"</p>"//根据随机数获取名字    创建节点
                let head = "<div><img src=../img/"+img[iNum]+"></div>"//根据随机数获取头像    创建内容
                let chatstr = "<div>"+$(".chatText").val()+"</div>"//获取输入内容
                let current = "<section>"+head+userName+chatstr+"</section>"//将头像、名字和内容拼接在一起(输入框的值)
                $(".chatBody").html(str+current);//将输入框和聊天框拼接到一起，一起赋给聊天框
                $(".chatBody section div:last").addClass("chatContent");//聊天框内容添加背景
                $(".chatText").val("")//清空文本域内容
            }

        })
        $("#send2").click(function () {
            $("body").hide(1000)
        })
    })

jq导包请用自己的导入