jquery添加div实现消息聊天框


Posted in jQuery onFebruary 08, 2020

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

jquery添加div实现消息聊天框

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jQuery实现推拉门效果
Oct 19 jQuery
jQuery实现可以扩展的日历
Dec 01 jQuery
jQuery实现聊天对话框
Feb 08 #jQuery
jquery实现聊天机器人
Feb 08 #jQuery
jQuery实现获取多选框的值示例
Feb 07 #jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 #jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 #jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 #jQuery
9种方法优化jQuery代码详解
Feb 04 #jQuery
You might like
PL-880隐藏功能
2021/03/01 无线电
Php获取金书网的书名的实现代码
2010/06/11 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
Less 安装及基本用法
2018/05/05 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
layui table 参数设置方法
2018/08/14 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
python二叉树的实现实例
2013/11/21 Python
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python类的动态修改的实例方法
2017/03/24 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
Python实现的简单计算器功能详解
2018/08/25 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
采购部主管岗位职责
2014/01/01 职场文书
植树节活动总结
2014/04/30 职场文书
2014年团工作总结
2014/11/27 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
作弊检讨书
2015/01/27 职场文书
长城导游词300字
2015/01/30 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
Nginx实现会话保持的两种方式
2022/03/18 Servers
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL