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中关于bind()方法的使用技巧分享
Mar 30 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 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中进行身份认证
2006/10/09 PHP
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
php 动态多文件上传
2009/01/18 PHP
php数组合并的二种方法
2014/03/21 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
jQuery 浮动广告实现代码
2008/12/25 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
python删除文本中行数标签的方法
2018/05/31 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
python3 enum模块的应用实例详解
2019/08/12 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
乌克兰在线药房:Аптека24
2019/10/30 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
护士上岗前培训自我鉴定
2014/04/20 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
好听的队名和口号
2014/06/09 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
党员检讨书
2014/10/13 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python