JQuery实现聊天对话框
效果图如下:
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实现聊天对话框的更多相关文章
- 屏蔽QQ聊天对话框中的广告
原文地址: 怎么在QQ聊天对话框中屏蔽广告_百度经验 http://jingyan.baidu.com/article/48a42057ca12c1a924250402.html QQ已经成为 ...
- 聊天对话框(ctrl+enter发送)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 三、jQuery--jQuery基础--jQuery基础课程--第12章 jQuery在线聊天室
在线聊天室案例 一.功能简介: 1.用户需要登录后才能进入聊天室交流 2.已无刷新的方式,动态展示交流后的内容和在线人员的基本信息 3.登录后的用户可以提交文字和表情图标 技术重点:利用ajax的无刷 ...
- jquery重写一个对话框
(原文来自博客园 wuchao.cnblogs.com) 写一个简单的基于jquery的对话框 css: #dialog { border:solid 1px #CCC; width:300px; h ...
- jQuery UI 实例 - 对话框(Dialog)(zhuan)
http://www.runoob.com/jqueryui/example-dialog.html ************************************************* ...
- 主攻ASP.NET MVC4.0之重生:Jquery Mobile 按钮+对话框使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- jQuery实时聊天jquery-chat
jquery-chat是基于jQuery UI + Node.js + Socket.IO 实现100%纯JavaScript实时聊天(客户端和服务器都是JS),实现了facebook / Gmail ...
- 使用jQuery开发dialog对话框插件
1.插件使用 首先引入 jquery 库,然后引入 dialog.js.dialog.css,如下: <script type="text/javascript" src=& ...
- Ubuntu上Qt+Tcp网络编程之简单聊天对话框
首先看一下实现结果: >>功能: (1)服务器和客户端之间进行聊天通信: (2)一个服务器可同时给多个客户端发送消息:(全部连接时) 也可以只给特定的客户端发送消息:(连接特定IP) ...
随机推荐
- 服务器word权限添加
我们的程序部署到IIS上会出现上图所示的错误. 这个是由于IIS没有权限访问word所致. 解决的方法: 在运行对话框中输入: mmc -32 出来如下图的界面: 然后点击"文件&q ...
- Topcoder SRM 698 Div1 250 RepeatString(dp)
题意 [题目链接]这怎么发链接啊..... Sol 枚举一个断点,然后类似于LIS一样dp一波 这个边界条件有点迷啊..fst了两遍... #include<bits/stdc++.h> ...
- jQuery使用最广泛的javascript函数库
网站建设中,jQuery之最方便的的库了,当用到其中的JavaScript函数库的时候,不禁会想居然还有这么简单的操作? 一.选择网页元素 jQuery的基本设计思想和主要用法,就是"选择某 ...
- mui使用技巧
1.document.addEventListener('plusready', function(){ //console.log("所有plus api都应该在此事件发生后调用,否则会出 ...
- Siebel应用数据结构层次
在Siebel应用里数据在多个层次上使用了不同的定义方式,每一个层次侧重于数据的不同的特征,主要分为数据用户界面层定义(UI),业务逻辑层定义(Business Layer,可以是业务含义层)以及数据 ...
- 【NLP_Stanford课堂】最小编辑距离
一.什么是最小编辑距离 最小编辑距离:是用以衡量两个字符串之间的相似度,是两个字符串之间的最小操作数,即从一个字符转换成另一个字符所需要的操作数,包括插入.删除和置换. 每个操作数的cost: 每个操 ...
- 框架页面jquery装载
- Selenium2学习(四)-- xpath定位
前言 在上一篇简单的介绍了用工具查看目标元素的xpath地址,工具查看比较死板,不够灵活,有时候直接复制粘贴会定位不到.这个时候就需要自己手动的去写xpath了,这一篇详细讲解xpath的一些语法. ...
- 面条代码 vs. 馄沌代码
转载自:https://blog.csdn.net/godsme_yuan/article/details/6594013
- 关于message pack as3 版本的一些修改。
玩个人项目的时候,根据前辈的推荐开始用messagepack,分别是py版和as3版: 然后在github上找到了demonsters的as3模块,于是颠屁颠屁地拿来用了,用的时候发现了一些小地方过不 ...