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+css实现下拉列表功能
Sep 03 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
jquery实现手风琴案例
May 04 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 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
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
python进阶教程之词典、字典、dict
2014/08/29 Python
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
Python内置函数delattr的具体用法
2017/11/23 Python
python机器学习实战之K均值聚类
2017/12/20 Python
谈谈Python中的while循环语句
2019/03/10 Python
基于Django实现日志记录报错信息
2019/12/17 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
工商管理本科毕业生求职信范文
2013/10/05 职场文书
高老头读书笔记
2015/06/30 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python