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调用XML实现无刷新即时聊天
HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用JQuery调用XML实现
-
jquery实现聊天机器人
本文实例为大家分享了jquery实现聊天机器人的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta
-
jQuery实现简易聊天框
本文实例为大家分享了jQuery实现简易聊天框的具体代码,供大家参考,具体内容如下 效果: CSS代码: body{ margin: 0; } .kuan{ height:550px; width: 650px; background-color: #ccc; margin: 80px auto; } .header{ width: 100%; height: 35px; background-color: #00f; } .chatBody{ width: 100%; height: 70%;
-
jquery添加div实现消息聊天框
本文实例为大家分享了jquery添加div实现消息聊天框的具体代码,供大家参考,具体内容如下 上代码 <html> <head> <style> * { margin: 0; padding: 0; } .border { margin-left: 300px; width: 900px; background-color: white; position: relative; border: 1px solid rgb(221, 221, 221); } .borde
-
javascript和jQuery实现网页实时聊天的ajax长轮询
介绍 大家都知道,HTTP协议是一个属于应用层的面向对象的协议,HTTP 协议一共有五大特点: 1.支持客户/服务器模式; 2.简单快速; 3.灵活; 4.无连接; 5.无状态. 所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的长时间联系,从而源源不段地获取信息. 一直以来的方式无非有这么几种: 1.长连接,即服务器端不断开联系,PHP服务器端用ob系列函数来不停的读取输出,但是相当耗费服务器资源. 2.Flash socket,
-
基于jQuery实现简单人工智能聊天室
花了俩小时折腾出来的,jQuery人工智能聊天室长这样: 主要功能: 1.当然是聊天啦~点击飞机按钮或者回车可以发送消息到面板. 2.输入特定的内容,系统会给你相应的回复(这里我只设置了Hello,How are you和询问时间的自动回复). 3.点击叉叉可以清除面板上的所有聊天记录. 4.问时间的时候,根据现在的时间,会给你相应的不同的回复,比如现在是22-23点,系统会回复你"good night". 5.随着聊天的进行,聊天面板右侧的滚动条会一直维持在最底部. HTML: &l
-
jquery仿微信聊天界面
首先看一下我们的效果图. 这个颜色可能搭配的有些不合适,但基本功能大都实现了.就是你和你同桌对话,你发的消息在你的左侧,而在他设备的右侧. 首先先写好整体的框架,在一个大容器中放两个盒子,分别是左侧和右侧的界面.然后每个盒子里面包含了三大部分:头部.内容区.和底部.只要写好一侧,另一侧进行粘贴复制就可以了. 首先定义一个大的 来盛放左右两个盒子. <div id = "main"> //左侧聊天界面 <div id = "box"> <
-
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
本文实例讲述了JS(jQuery)实现聊天接收到消息语言自动提醒功能.分享给大家供大家参考,具体如下: 综述 最近在开发一个网页端的客服系统,需求要求聊天双方接收到消息能有语音提醒,并且客服端如果存在未读消息要求每隔五分钟给客服语音提醒一下.客服聊天系统使用PHP的Workerman框架进行开发,由于语音提醒实现的功能一样,故而在本篇博文中从简描述,只进行定时循环提醒的功能记录,不说实时的那个语音提醒,因为思路都是一样的,主要是看如何实现自动播放语音功能. 思路 实时提醒 这个就比较明确了,就是
-
JavaScript/jQuery、HTML、CSS 构建 Web IM 远程及时聊天通信程序
以及需要用到Http方式和Openfire通信的第三方库(JabberHTTPBind). JabberHTTPBind是jabber提供的XMPP协议通信的Http bind发送的形式,它可以完成WebBrowser和Openfire建立长连接通信. 主要通信流程如下图所示: 用户A通过JavaScript jsjac.js库发送一条消息到JabberHTTPBind这个Servlet容器,然后JabberHTTPBind的Servlet容器会向Openfire发送XMPP协议的XML报文.O
-
PHP+jquery+ajax实现即时聊天功能实例
本文实例讲述了PHP+jquery+ajax实现即时聊天功能的方法.分享给大家供大家参考.具体如下: 这是一个简单的利用jquery与php做的一个聊天室的源码,我们这里定时利用ajax读取数据库并进行刷新了,下面直接参上源码,实例代码如下: index.html页面如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht