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 相关文章推荐
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
jQuery实现日历效果
Sep 11 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
PHP中redis的用法深入解析
2014/02/20 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
php内存缓存实现方法
2015/01/24 PHP
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
Python实现的计数排序算法示例
2017/11/29 Python
关于Python数据结构中字典的心得
2017/12/04 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
小学家长会邀请函
2014/01/23 职场文书
触摸春天教学反思
2014/02/03 职场文书
应届毕业生通用的自荐书范文
2014/02/07 职场文书
小学生手册家长评语
2014/04/16 职场文书
安全技术说明书
2014/05/09 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL