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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery实现高级检索功能
May 28 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 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写的AES加密解密类分享
2014/06/20 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
Python 中Pickle库的使用详解
2018/02/24 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
原生python实现knn分类算法
2019/10/24 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
送货司机岗位职责
2013/12/11 职场文书
幼儿园实习自我鉴定
2013/12/15 职场文书
饭店工作计划书
2014/01/10 职场文书
文明寝室申报材料
2014/05/12 职场文书
结对共建工作方案
2014/06/02 职场文书
2015年工会工作总结
2015/03/30 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
教师廉政准则心得体会
2016/01/20 职场文书