效果图如下：

HTML代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.         .talk_con{
  10.             width:600px;
  11.             height:500px;
  12.             border:1px solid #666;
  13.             margin:50px auto 0;
  14.             background:#f9f9f9;
  15.         }
  16.         .talk_show{
  17.             width:580px;
  18.             height:420px;
  19.             border:1px solid #666;
  20.             background:#fff;
  21.             margin:10px auto 0;
  22.             overflow:auto;
  23.         }
  24.         .talk_input{
  25.             width:580px;
  26.             margin:10px auto 0;
  27.         }
  28.         .whotalk{
  29.             width:80px;
  30.             height:30px;
  31.             float:left;
  32.             outline:none;
  33.         }
  34.         .talk_word{
  35.             width:420px;
  36.             height:26px;
  37.             padding:0px;
  38.             float:left;
  39.             margin-left:10px;
  40.             outline:none;
  41.             text-indent:10px;
  42.         }
  43.         .talk_sub{
  44.             width:56px;
  45.             height:30px;
  46.             float:left;
  47.             margin-left:10px;
  48.         }
  49.         .atalk{
  50.            margin:10px;
  51.         }
  52.         .atalk span{
  53.             display:inline-block;
  54.             background:#0181cc;
  55.             border-radius:10px;
  56.             color:#fff;
  57.             padding:5px 10px;
  58.         }
  59.         .btalk{
  60.             margin:10px;
  61.             text-align:right;
  62.         }
  63.         .btalk span{
  64.             display:inline-block;
  65.             background:#ef8201;
  66.             border-radius:10px;
  67.             color:#fff;
  68.             padding:5px 10px;
  69.         }
  70.     </style>
  71.     <script src="js/jquery-1.12.4.min.js"></script>
  72.     <script type="text/javascript">
  73.     // 写出对应功能代码
  74.     $(function(){
  75.         // 发送按钮单击，获取用户输入的数据，显示到上面的区域
  76.         var $talksub = $('#talksub')
  77.         var $words = $('#words')
  78.         $talksub.click(function(){
  79.             var vals = $('#talkwords').val()
  80.             alert(vals)
  81.             // 如果是a说 value==0，就显示a的样式的文字
  82.             var whoVal = $('#who').val()
  83.             var str = ''
  84.             if(vals == '')
  85.             {
  86.                 alert('请输入内容')
  87.                 return
  88.             }
  89.  
  90.             if(whoVal ==0)
  91.             {
  92.                 str = '<div class="atalk"><span>A说：'+vals+'</span></div>'
  93.             }
  94.             else
  95.             {
  96.                 str = '<div class="btalk"><span>B说：'+vals+'</span></div>'
  97.             }
  98.             // 原有内容的基础上加上 str
  99.             $words.html( $words.html() + str )
  100.         })
  101.     })
  102.     </script>
  103. </head>
  104. <body>
  105.     <div class="talk_con">
  106.         <div class="talk_show" id="words">
  107.             <div class="atalk"><span>A说：吃饭了吗？</span></div>
  108.             <div class="btalk"><span>B说：还没呢，你呢？</span></div>
  109.         </div>
  110.         <div class="talk_input">
  111.             <select class="whotalk" id="who">
  112.                 <option value="0">A说：</option>
  113.                 <option value="1">B说：</option>
  114.             </select>
  115.             <input type="text" class="talk_word" id="talkwords">
  116.             <input type="button" value="发送" class="talk_sub" id="talksub">
  117.         </div>
  118.     </div>
  119. </body>
  120. </html>

　　

JQuery实现聊天对话框的更多相关文章

  1. 屏蔽QQ聊天对话框中的广告

    原文地址: 怎么在QQ聊天对话框中屏蔽广告_百度经验 http://jingyan.baidu.com/article/48a42057ca12c1a924250402.html     QQ已经成为 ...

  2. 聊天对话框（ctrl+enter发送）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. 三、jQuery--jQuery基础--jQuery基础课程--第12章 jQuery在线聊天室

    在线聊天室案例 一.功能简介: 1.用户需要登录后才能进入聊天室交流 2.已无刷新的方式,动态展示交流后的内容和在线人员的基本信息 3.登录后的用户可以提交文字和表情图标 技术重点:利用ajax的无刷 ...

  4. jquery重写一个对话框

    (原文来自博客园 wuchao.cnblogs.com) 写一个简单的基于jquery的对话框 css: #dialog { border:solid 1px #CCC; width:300px; h ...

  5. jQuery UI 实例 - 对话框（Dialog）(zhuan)

    http://www.runoob.com/jqueryui/example-dialog.html ************************************************* ...

  6. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 按钮+对话框使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. jQuery实时聊天jquery-chat

    jquery-chat是基于jQuery UI + Node.js + Socket.IO 实现100%纯JavaScript实时聊天(客户端和服务器都是JS),实现了facebook / Gmail ...

  8. 使用jQuery开发dialog对话框插件

    1.插件使用 首先引入 jquery 库,然后引入 dialog.js.dialog.css,如下: <script type="text/javascript" src=& ...

  9. Ubuntu上Qt+Tcp网络编程之简单聊天对话框

    首先看一下实现结果: >>功能: (1)服务器和客户端之间进行聊天通信: (2)一个服务器可同时给多个客户端发送消息:(全部连接时)   也可以只给特定的客户端发送消息:(连接特定IP) ...

随机推荐

  1. Scrapy框架之代理和cookie

    Cookie 是在 HTTP 协议下,服务器或脚本可以维护客户工作站上信息的一种方式.Cookie 是由 Web 服务器保存在用户浏览器(客户端)上的小文本文件,它可以包含有关用户的信息.无论何时用户 ...

  2. BZOJ4010: [HNOI2015]菜肴制作(拓扑排序 贪心)

    题意 题目链接 Sol 震惊,HNOI竟出NOI原题 直接在反图上贪心一下. // luogu-judger-enable-o2 // luogu-judger-enable-o2 #include& ...

  3. numpy中一些常用函数的用法总结

    先简单记录一下,后续补充详细的例子   1. strip()函数 s.strip(rm):s为字符串,rm为要删除的字符序列 只能删除开头或是结尾的字符或者字符串.不能删除中间的字符或是字符串 当rm ...

  4. ref 和 out 的区别

    ref和out都是C#中的关键字,所实现的功能也差不多,都是指定一个参数按照引用传递. 对于编译后的程序而言,它们之间没有任何区别,也就是说它们只有语法区别. 总结起来,他们有如下语法区别: 1.re ...

  5. Java—集合框架Map

    Map接口 Map提供了一种映射关系,其中的元素是以键值对(key-value)的形式存储的,key和value可以是任意类型的对象,能够实现根据key快速查找value. Map中的键值对以Entr ...

  6. laravel 接入蚂蚁金服SDK（以支付宝APP支付为例）开发步骤

    一.创建应用及配置 首先需要到蚂蚁金服开放平台(https://docs.open.alipay.com)注册应用,获取应用id(APP_ID),并且配置应用,主要是签约应用,这个需要审核,一般2-5 ...

  7. oracle 父子级 查询

    SELECT * FROM T_ASSETS_TYPE t CONNECT by t.UNIQUE_CODE = prior t.SUP_ASSETS_CODE start with t.UNIQUE ...

  8. 6 - 常用模块(os,sys,time&datetime,random,json&picle,shelve,hashlib)

    导入模块 想使用 Python 源文件,只需在另一个源文件里执行 import 语句 import module1[, module2[,... moduleN] from语句让你从模块中导入一个指定 ...

  9. IOS PushMeBaby(是一款用来测试ANPs的开源Mac项目)

    ● PushMeBaby是一款用来测试ANPs的开源Mac项目 ● 它充当了服务器的作用,用法非常简单 ● 它负责将内容提交给苹果的APNs服务器,苹果的APNs服务器再将内容推送给用户 的设备 ● ...

  10. 使用Sleep方法延迟时间

    实现效果: 关键知识:(线程的定义) 实现代码: private void Form1_Load(object sender, EventArgs e) { Thread show = new Thr ...