jQuery实现聊天对话框


Posted in jQuery onFebruary 08, 2020

本文实例为大家分享了jQuery实现聊天对话框的具体代码,供大家参考,具体内容如下

效果图:左下角选择对话的角色,在对话框输入消息点击发送按钮,消息显示在上面界面当中,然后对话框内容被清空。

jQuery实现聊天对话框

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    .talk_con {
      width: 600px;
      height: 500px;
      border: 1px solid #666;
      margin: 50px auto 0;
      background: #f9f9f9;
    }
 
    .talk_show {
      width: 580px;
      height: 420px;
      border: 1px solid #666;
      background: #fff;
      margin: 10px auto 0;
      overflow: auto;
    }
 
    .talk_input {
      width: 580px;
      margin: 10px auto 0;
    }
 
    .whotalk {
      width: 80px;
      height: 30px;
      float: left;
      outline: none;
    }
 
    .talk_word {
      width: 420px;
      height: 26px;
      padding: 0px;
      float: left;
      margin-left: 10px;
      outline: none;
      text-indent: 10px;
    }
 
    .talk_sub {
      width: 56px;
      height: 30px;
      float: left;
      margin-left: 10px;
    }
 
    .atalk {
      margin: 10px;
    }
 
    .atalk span {
      display: inline-block;
      background: #0181cc;
      border-radius: 10px;
      color: #fff;
      padding: 5px 10px;
    }
 
    .btalk {
      margin: 10px;
      text-align: right;
    }
 
    .btalk span {
      display: inline-block;
      background: #ef8201;
      border-radius: 10px;
      color: #fff;
      padding: 5px 10px;
    }
  </style>
  <script src='../js/jquery-1.12.4.js'></script>
  <script>
  $(function(){
    $('#talksub').click(function(){
      //发送单击,获取用户输入的数据value属性值
      var vals=$('#talkwords').val()
      //如果输入的数据为空,则弹窗提示
      if (vals=='')
      {
        alert('请输入数据!')
        return
      }
      //条件下拉列表中的value值是0还是1
      var whovals=$('#who').val()
      var str=""
      //选择A发送还是B发送
      if (whovals==0){
        str='<div class="atalk"><span>A:'+ vals+'</span></div>'
      }
      else{
        str='<div class="btalk"><span>B:'+ vals+'</span></div>'
      }
      //原有的内容+str,否则会覆盖掉原有内容
      $('#words').html($('#words').html()+str)
      //发送完数据后清空输入框
      $('#talkwords').val('')
    })
  })
  </script>
</head>
 
<body>
  <div class="talk_con">
    <div class="talk_show" id="words">
      <div class="atalk"><span>A:你还好吗?</span></div>
      <div class="btalk"><span>B:嗯,你呢?</span></div>
    </div>
    <div class="talk_input">
      <select class="whotalk" id="who">
        <option value="0">A:</option>
        <option value="1">B:</option>
      </select>
      <input type="text" class="talk_word" id="talkwords">
      <input type="button" value="发送" class="talk_sub" id="talksub">
    </div>
  </div>
</body>
 
</html>

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

jQuery 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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
jQuery实现小火箭返回顶部特效
Feb 03 #jQuery
You might like
1 Tube Radio
2021/03/02 无线电
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
python从sqlite读取并显示数据的方法
2015/05/08 Python
python之Socket网络编程详解
2016/09/29 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
python3注册全局热键的实现
2020/03/22 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
电子商务专业自我鉴定
2013/12/18 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
技术员个人工作总结
2015/03/03 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
Javascript设计模式之原型模式详细
2021/10/05 Javascript
Python OpenCV实现图形检测示例详解
2022/04/08 Python