jQuery实现聊天对话框

2024-08-16 11:11:17

本文实例为大家分享了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人工智能聊天室长这样: 主要功能: 1.当然是聊天啦~点击飞机按钮或者回车可以发送消息到面板. 2.输入特定的内容,系统会给你相应的回复(这里我只设置了Hello,How are you和询问时间的自动回复). 3.点击叉叉可以清除面板上的所有聊天记录. 4.问时间的时候,根据现在的时间,会给你相应的不同的回复,比如现在是22-23点,系统会回复你"good night". 5.随着聊天的进行,聊天面板右侧的滚动条会一直维持在最底部. HTML: &l
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
jquery仿微信聊天界面

首先看一下我们的效果图. 这个颜色可能搭配的有些不合适,但基本功能大都实现了.就是你和你同桌对话,你发的消息在你的左侧,而在他设备的右侧. 首先先写好整体的框架,在一个大容器中放两个盒子,分别是左侧和右侧的界面.然后每个盒子里面包含了三大部分:头部.内容区.和底部.只要写好一侧,另一侧进行粘贴复制就可以了. 首先定义一个大的来盛放左右两个盒子. <div id = "main"> //左侧聊天界面 <div id = "box"> <
javascript和jQuery实现网页实时聊天的ajax长轮询

介绍大家都知道,HTTP协议是一个属于应用层的面向对象的协议,HTTP 协议一共有五大特点: 1.支持客户/服务器模式; 2.简单快速; 3.灵活; 4.无连接; 5.无状态. 所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的长时间联系,从而源源不段地获取信息. 一直以来的方式无非有这么几种: 1.长连接,即服务器端不断开联系,PHP服务器端用ob系列函数来不停的读取输出,但是相当耗费服务器资源. 2.Flash socket,
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
使用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实现
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】

本文实例讲述了JS(jQuery)实现聊天接收到消息语言自动提醒功能.分享给大家供大家参考,具体如下: 综述最近在开发一个网页端的客服系统,需求要求聊天双方接收到消息能有语音提醒,并且客服端如果存在未读消息要求每隔五分钟给客服语音提醒一下.客服聊天系统使用PHP的Workerman框架进行开发,由于语音提醒实现的功能一样,故而在本篇博文中从简描述,只进行定时循环提醒的功能记录,不说实时的那个语音提醒,因为思路都是一样的,主要是看如何实现自动播放语音功能. 思路实时提醒这个就比较明确了,就是
jquery实现聊天机器人

本文实例为大家分享了jquery实现聊天机器人的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta
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
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实现聊天对话框

相关推荐

随机推荐