jquery添加div实现消息聊天框
生活随笔
收集整理的這篇文章主要介紹了
jquery添加div实现消息聊天框
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
上代碼
<%@ 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>總結
以上是生活随笔為你收集整理的jquery添加div实现消息聊天框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 常见维度建模错误
- 下一篇： MongoDb随笔，PyMongo简单使