qq聊天框java_jQuery实现简单QQ聊天框

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

先放一张效果图！

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

关闭(C)

发送(S)

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

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里面追加内容

// 显示头像

${name[num]} // 显示昵称

${text}

// 显示文本内容

);

}

$('.chatText').val(''); // 获取完输入框的内容后清空输入框

})

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

qq聊天框java_jQuery实现简单QQ聊天框相关推荐

php 跳转qq群代码_一个简单QQ群聊案例代码解析(PHP实现)
问题: 使用面向对象编程的方式实现以下业务逻辑: 1. 张三使用账号a,密码b登录了qq 2. 显示出张三最后的登录的时间 3. 张三查看了 1小时内的行政部门群的信息(这个群里有张三,李四,王五,其 ...
Android开发实现简单QQ登录页面
Android开发实现极为简单的QQ登录页面设计一个简单QQ登录页面,无任何功能.然后打包安装到手机. 1.首先创建一个空白页面 2.打开样式设计的页面在activity_main.xml中写入代 ...
QQ机器人，涩图美图风景图发送，聚合点歌，砍公会战管理，简单对话聊天
Mirai-Plugin-HRobot mirai 群聊机器人插件,支持简单对话聊天,支持发送随机涩图(可指定tag).美图.风景图等,支持随机鸡汤发送,支持坎公骑冠剑会战统计.前线报道.会战报表等功 ...
java qq聊天界面_【附源码】用Java写了一个类QQ界面聊天小项目，可在线聊天！...
原标题:[附源码]用Java写了一个类QQ界面聊天小项目,可在线聊天! 目录: 1.功能实现 2.模块划分 3.使用到知识 4.部分代码实现 5.运行例图 1.功能实现 1.修改功能(密码.昵称.个性 ...
qq聊天页面设置html,如何设置qq聊天窗口消息显示方式
在qq聊天窗口中,有多种新消息显示的方式,我们可以根据自己的喜欢来对其进行设置,下面就让学习啦小编告诉大家如何设置qq聊天窗口消息显示方式. 设置qq聊天窗口消息显示方式的方法首先我们看一下,别人发 ...
java qq聊天界面代码,Java简易qq聊天，代码
Java简易qq聊天,代码关注:156 答案:2 手机版解决时间 2021-02-26 11:56 提问者心死旳很干净 2021-02-25 16:17 Java简易qq聊天,代码最佳答案 ...
html案例：模拟一个很简单的聊天框
html案例:模拟一个很简单的聊天框实现的代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...
聊天更轻松腾讯QQ消息自动发送(转)
聊天更轻松腾讯QQ消息自动发送(转) 这里为大家介绍的是一款功能强大的QQ消息群发工具--QQ消息自动发送. 它有几大特点: 1.突破了QQ每天只可以加255个好友的限制,可以无限制的添加好友. 2. ...
C#编写简单的聊天程序
原文:http://www.tracefact.net/CSharp-Programming/Simple-Chat.aspx 引言这是一篇基于Socket进行网络编程的入门文章,我对于网络编程的学 ...

qq聊天框java_jQuery实现简单QQ聊天框

qq聊天框java_jQuery实现简单QQ聊天框相关推荐

最新文章

热门文章