11

jquery添加div实现消息聊天框

  • 时间:2020-02-11 14:36 编辑:54菜鸟 来源: 阅读:16371
  • 扫一扫,手机访问
摘要:本文实例为大家分享了jquery添加div实现消息聊天框的具体代码,供大家参考,具体内容如下上代码<html><head><style>* {  margin: 0;  padding: 0;} .border {  margin-left: 300px;  width:

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

  • 全部评论(0)
资讯详情页最新发布上方横幅
最新发布的资讯信息
【织梦cms|织梦技巧】织梦默认作者和默认泉源修改(2021-12-08 10:11)
【织梦cms|织梦技巧】 织梦dedecms差异栏目导航显示差异样式的方式(2021-12-08 10:09)
【织梦cms|织梦技巧】织梦dede新建模型中自定义联动类别调用(2020-03-01 13:52)
【织梦cms|织梦技巧】织梦CMS标签中出现“系统无此标签,可能已经移除”(2020-03-01 13:51)
【织梦cms|织梦技巧】dedecms织梦系统后台验证码图片不显示的解决方法(2020-03-01 13:51)
【织梦cms|织梦技巧】dedecms更新文章会出现空白页(2020-03-01 13:50)
【织梦cms|织梦技巧】让织梦dedecms搜索结果按照点击数排序(2020-03-01 13:48)
【织梦cms|织梦技巧】在dedecms织梦内容页中调用文章缩略图(2020-03-01 13:47)
【织梦cms|织梦技巧】在dedecms织梦添加自制的背景图片(2020-03-01 13:47)
【织梦cms|织梦技巧】修改织梦dedecms幻灯片属性(2020-03-01 13:46)