jquery添加div实现消息聊天框

时间：2021-05-26

本文实例为大家分享了jquery添加div实现消息聊天框的具体代码，供大家参考，具体内容如下

上代码

<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.οnlοad=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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章