jquery添加div实现消息聊天框

2024-05-06 15:44:16

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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>

上一篇：js实现踩五彩块游戏

下一篇：jQuery实现简单聊天室