jQuery实现QQ简易聊天框

实现效果：

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>

jQuery代码：

$(function(){
            $("#send").click(function (){
                //使用数组保存聊天者的头像和昵称
                let uName = ["时尚伊人","六月奇迹","松松"];
                //随机获取头像和昵称
                let iNum=parseInt((Math.random()*2)+1);
                //设置昵称
                let userName="<span>"+uName[iNum]+"</span>";
                //设置头像
                let headStr="<img src=images/head0"+iNum+".jpg style='vertical-align:middle'>";
                //获取输入框内容
                let $text = $(" textarea").val();
                console.log($text);


                //判断输入框是否输入内容
                if ($text.length!==0){
                    //获取聊天内容
                    let str = $(".chatBody").html();
                    //将输入框内容添加到聊天内容中
                    $(".chatBody").html(str+"<div>"+headStr+userName+"<p style='margin-left: 36px;'>"+$text+"</p>"+"</div>");
                    $(".chatBody div p").addClass("content");
                    $(" textarea").val("")
                }
            })
        })