本文實例為大家分享了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>
新聞熱點
疑難解答
圖片精選
