<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="https://www.jb51.net/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> <div> <div> <div>聊天助手</div> </div> <div> <div> <div></div> <div> <span></span> <div></div> </div> </div> <div> <span></span> <div></div> </div> <br> </div> <div></div> <textarea></textarea> <div> <button>关闭</button> <button>发送</button> </div> </div> </div> </body> </html>
