效果图如下:

HTML代码如下:

<!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.min.js"></script>
<script type="text/javascript">
// 写出对应功能代码
$(function(){
// 发送按钮单击,获取用户输入的数据,显示到上面的区域
var $talksub = $('#talksub')
var $words = $('#words')
$talksub.click(function(){
var vals = $('#talkwords').val()
alert(vals)
// 如果是a说 value==0,就显示a的样式的文字
var whoVal = $('#who').val()
var str = ''
if(vals == '')
{
alert('请输入内容')
return
} if(whoVal ==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 )
})
})
</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实现聊天对话框的更多相关文章

  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. 服务器word权限添加

    我们的程序部署到IIS上会出现上图所示的错误. 这个是由于IIS没有权限访问word所致.   解决的方法: 在运行对话框中输入: mmc -32 出来如下图的界面:   然后点击"文件&q ...

  2. Topcoder SRM 698 Div1 250 RepeatString(dp)

    题意 [题目链接]这怎么发链接啊..... Sol 枚举一个断点,然后类似于LIS一样dp一波 这个边界条件有点迷啊..fst了两遍... #include<bits/stdc++.h> ...

  3. jQuery使用最广泛的javascript函数库

    网站建设中,jQuery之最方便的的库了,当用到其中的JavaScript函数库的时候,不禁会想居然还有这么简单的操作? 一.选择网页元素 jQuery的基本设计思想和主要用法,就是"选择某 ...

  4. mui使用技巧

    1.document.addEventListener('plusready', function(){ //console.log("所有plus api都应该在此事件发生后调用,否则会出 ...

  5. Siebel应用数据结构层次

    在Siebel应用里数据在多个层次上使用了不同的定义方式,每一个层次侧重于数据的不同的特征,主要分为数据用户界面层定义(UI),业务逻辑层定义(Business Layer,可以是业务含义层)以及数据 ...

  6. 【NLP_Stanford课堂】最小编辑距离

    一.什么是最小编辑距离 最小编辑距离:是用以衡量两个字符串之间的相似度,是两个字符串之间的最小操作数,即从一个字符转换成另一个字符所需要的操作数,包括插入.删除和置换. 每个操作数的cost: 每个操 ...

  7. 框架页面jquery装载

  8. Selenium2学习(四)-- xpath定位

    前言 在上一篇简单的介绍了用工具查看目标元素的xpath地址,工具查看比较死板,不够灵活,有时候直接复制粘贴会定位不到.这个时候就需要自己手动的去写xpath了,这一篇详细讲解xpath的一些语法. ...

  9. 面条代码 vs. 馄沌代码

    转载自:https://blog.csdn.net/godsme_yuan/article/details/6594013

  10. 关于message pack as3 版本的一些修改。

    玩个人项目的时候,根据前辈的推荐开始用messagepack,分别是py版和as3版: 然后在github上找到了demonsters的as3模块,于是颠屁颠屁地拿来用了,用的时候发现了一些小地方过不 ...