jQuery实现简单QQ聊天框


Posted in jQuery onAugust 27, 2020

本文实例为大家分享了jQuery实现简单QQ聊天框的具体代码,供大家参考,具体内容如下

先放一张效果图!

jQuery实现简单QQ聊天框

1.首先我们把基本框架搭出来,还要准备三张图片用来当作头像,下面是html的内容

<body>
<section id="chat">
  <div class="chatBody"></div>
  <div>
    <img src="images/icon.jpg">
  </div>
  <textarea class="chatText"></textarea>
  <div class="btn">
    <span>关闭(C)</span>
    <span id="send">发送(S)</span>
  </div>
</section>
</body>

2.头部引入jQuery,我用的版本是3.5.1的

<script src="js/jquery-3.5.1.js"></script>

3.先写一个事件加载函数,网页加载完成后执行此函数

$(funtion () {

})

4.分别用一个数组来保存头像图片的路径和网友昵称

$(funtion () {
 let pic = ['images/head01.jpg', 'images/head02.jpg', 'images/head03.jpg'];
  let name = ['chen', 'liu', 'feng'];
})

5.给发送按钮添加一个点击事件,核心在这里

$(function () {
      let pic = ['images/head01.jpg', 'images/head02.jpg', 'images/head03.jpg'];
      let name = ['chen', 'liu', 'feng'];
      $('#send').click(function () {
        let num = Math.floor((Math.random()*3)); // 随机获取一个0到2的整数,用作数组下标,从而使头像和昵称随机显示
        let text = $('.chatText').val();     // 获取输入框的文本内容,并赋值给text
        if (text.length > 0) {          // 文本内容的长度大于0就执行里面的函数
          $('.chatBody').append(        // 在div里面追加内容
            `<div class="item">
              <img src="${pic[num]}" alt="头像"> // 显示头像 
              <span>${name[num]}</span>     // 显示昵称
              <div>${text}</div>        // 显示文本内容
             </div>`
          );
        }
        $('.chatText').val(''); // 获取完输入框的内容后清空输入框
      })
 })

css样式就看自己喜好调啦!

他的实现逻辑很简单,点击事件获取输入框内容,然后用append()方法将模板字符串追加到容器里面,最后清空输入框,头像和昵称用随机数生成配合数组就可以搞定!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 #jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 #jQuery
jQuery实现评论模块
Aug 19 #jQuery
jQuery实现简单评论功能
Aug 19 #jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 #jQuery
jQuery实现异步上传一个或多个文件
Aug 17 #jQuery
jQuery中event.target和this的区别详解
Aug 13 #jQuery
You might like
APMServ使用说明
2006/10/23 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
php中stream(流)的用法
2014/03/25 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
js模拟C#中List的简单实例
2014/03/06 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
python实现sublime3的less编译插件示例
2014/04/27 Python
Python中自定义函数的教程
2015/04/27 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
python 实现矩阵按对角线打印
2019/11/29 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
“学雷锋活动月”总结
2014/03/09 职场文书
小学家长通知书评语
2014/12/31 职场文书
部门经理助理岗位职责
2015/04/13 职场文书