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正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
基于jQuery实现瀑布流页面
Apr 11 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jquery实现广告上下滚动效果
Mar 04 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
E路文章系统PHP
2006/12/11 PHP
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
英语感恩演讲稿
2014/01/14 职场文书
九年级物理教学反思
2014/01/29 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
Python实现照片卡通化
2021/12/06 Python