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 相关文章推荐
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
jQuery实现简单评论功能
Aug 19 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
php实现mysql封装类示例
2014/05/07 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
兼容ie和firefox js关闭代码
2008/12/11 Javascript
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
浅谈Python 的枚举 Enum
2017/06/12 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
Python通过Pillow实现图片对比
2020/04/29 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
职工运动会感言
2014/02/07 职场文书
新品发布会主持词
2014/04/02 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
升旗仪式演讲稿
2014/05/08 职场文书