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 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jQuery实现简单飞机大战
Jul 05 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错误信息方法的详解
2013/06/09 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
农历与西历对照
2006/09/06 Javascript
javascript tips提示框组件实现代码
2010/11/19 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
Python专用方法与迭代机制实例分析
2014/09/15 Python
详解django中自定义标签和过滤器
2017/07/03 Python
python如何实现内容写在图片上
2018/03/23 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
学生实习自我鉴定
2013/10/11 职场文书
数控技术应届生求职信
2013/11/13 职场文书
绩效工资分配方案
2014/01/18 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
Java数据结构之堆(优先队列)
2022/05/20 Java/Android