jquery添加div实现消息聊天框

最新推荐文章于 2025-06-10 16:27:53 发布
原创最新推荐文章于 2025-06-10 16:27:53 发布 · 1.9k 阅读
1 ·
CC 4.0 BY-SA版权
jquery 专栏收录该内容
1 篇文章
订阅专栏
本文介绍了一个聊天助手的界面设计及其实现方式，包括了聊天窗口布局、消息发送机制及简单的前后端交互流程。通过HTML、CSS和JavaScript实现了聊天界面的构建，并使用AJAX进行异步数据交换。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
上代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
* {
    margin: 0;
    padding: 0;
}

.border {
    margin-left: 300px;
    width: 900px;
    background-color: white;
    position: relative;
    border: 1px solid rgb(221, 221, 221);
}

.border .border-next {
    background-color: #dcad50;
    position: relative;
    height: 23px;
    line-height: 40px;
    display: flex;
    padding: 10px 60px 10px 80px;
}

.border-next .people {
    background-color: #dcad50;
    font-size: 20px;
    color: black;
    font-family: 楷体;
    margin-left: 300px;
}

.border .border-second {
    background-color: white;
    margin-left: 0px;
    width: 700px;
    height: 530px;
    flex: 1;
    flex-direction: column;
    overflow-y: auto;
    border-right: 1px solid rgb(221, 221, 221);
    border-bottom: 1px solid rgb(221, 221, 221);
}

.border .border-img {
    background-color: white;
    margin-left: 0px;
    width: 700px;
    height: 30px;
    border-right: 1px solid rgb(221, 221, 221);
    border-bottom: 1px solid rgb(221, 221, 221);
}

.border-bottom {
    display: flex;
    width: 700px;
    height: 120px;
    background-color: white;
    overflow: auto;
    font-size: 20px;
    border-style: solid;
    border-color: #FFFFFF;
    border-right: 1px solid rgb(221, 221, 221);
}

.button {
    display: flex;
    margin-left: 530px;
}

.button .shut {
    background-color: white;
    width: 70px;
    height: 30px;
    font-size: 20px;
    text-align: center;
    border: 1px solid rgb(221, 221, 221);
}

.button .send {
    background-color: white;
    margin-left: 15px;
    width: 70px;
    height: 30px;
    font-size: 20px;
    text-align: center;
    border: 1px solid rgb(221, 221, 221);
    background-color: #DBAC50;
}

.replyChat {
    display:flex;
    width: 150px;
    background: #12B7F5;
    border-radius: 5px;
    /* 圆角 */
    position: relative;
    margin-left: 500px;
    align-content: center;
    margin-bottom: 30px;
}

.sendChat {
    display:flex;
    width: 150px;
    background: #E5E5E5;
    border-radius: 5px;
    /* 圆角 */
    position: relative;
    margin-left: 50px;
    align-content: center;
    margin-bottom: 30px;
    border-color: white white white #E5E5E5;
}

.sendChat span {
    display: inline-block;
    margin-left: 10px;
    line-height: 35px;
}

.replyChat span {
    display: inline-block;
    margin-left: 10px;
    line-height: 35px;
}

.sendChat .arrows {
    position: absolute;
    top: 5px;
    left: -16px;
    /* 圆角的位置需要细心调试哦 */
    width: 0;
    height: 0;
    font-size: 0;
    border: solid 8px;
    border-color: white #E5E5E5 white white;
}

.replyChat .arrow {
    position: absolute;
    top: 5px;
    right: -16px;
    /* 圆角的位置需要细心调试哦 */
    width: 0;
    height: 0;
    font-size: 0;
    border: solid 8px;
    border-color: white white white #12B7F5;
}

.chatTouXiang {
    width: 50px;
    height: 50px;
    border-radius: 50%; 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url(img/tou.png);
}
.chatCnt{

}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>聊天助手</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
    window.onload=function(){
        $(".arrow").hide();
        $(".arrows").hide();
    }
    document.onkeydown = function(e) {
        if (e.keyCode == 13 && e.ctrlKey) {
            // 这里实现换行
            document.getElementById("sendContent").value += "\n";
        } else if (e.keyCode == 13) {
            // 避免回车键换行
            e.preventDefault();
            // 下面写你的发送消息的代码
            f();
        }
    }
    function f() {
        var cnt = $("#sendContent").val();
        if(cnt == '')alert('内容不能为空');   
        if(cnt != ''){
            var node = document.createElement('div');
            node.className = 'sendChat';
            var span = document.createElement('span');
            span.innerHTML = cnt;
            var arrow = document.createElement('div');
            arrow.className = 'arrows';
            node.appendChild(span);
            node.appendChild(arrow);
            $(".border-second").append($(node));
            $("#sendContent").val('');
            $.ajax({
                data : cnt,
                type : "post",
                url : "CharServlet?id=" + cnt,
                dataType : "json",
                success : function(msg) {
                    var node = document.createElement('div');
                    node.className = 'replyChat';
                    var span = document.createElement('span');
                    span.innerHTML = msg.text;
                    var arrow = document.createElement('div');
                    arrow.className = 'arrow';
                    node.appendChild(arrow);
                    node.appendChild(span);

                    $(".border-second").append($(node));

                    var boderSecondDiv = $('.border-second');
                    var lastChild = boderSecondDiv[0].lastChild;
                    var lastChildH = lastChild.offsetTop;
                    var h = 0;
                    for (var i = 0, len = lastChild.children.length; i < len; i++) {

                        h += lastChild.children[i].offsetHeight;
                    }
                    boderSecondDiv[0].scrollTop = lastChildH + h;

                },
                error : function(msg) {
                    alert("请求失败");
                }
            });
        }
    }
</script>
</head>

<div class="frame">
    <div class="border">
        <div class="border-next">
            <div class="people">聊天助手</div>
        </div>
        <div class="border-second">
            <div class="chatCnt">
            <div class="chatTouXiang"></div>  
            <div class="sendChat">
                <span></span>
                <div class="arrows"></div>
            </div>
            </div>
            <div class="replyChat">
                <span></span>
                <div class="arrow"></div>
            </div>
            <br>
        </div>
        <div class="border-img"></div>
        <textarea id="sendContent" class="border-bottom"></textarea>
        <div class="button">
            <button class="shut">关闭</button>
            <button id="selectBtn" class="send" onclick="f()">发送</button>
        </div>

    </div>
</div>
</body>
</html>
这里写图片描述