JavaScript实现QQ聊天室功能
更新时间：2022年07月29日 10:34:47 作者：今天我学习
这篇文章主要为大家详细介绍了JavaScript实现QQ聊天室功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现QQ聊天室的具体代码，供大家参考，具体内容如下
1. 任务要求
1）掌握基本过滤选择器；
2）掌握jQuery对象的click()方法；
3）掌握jQuery对象的css()方法；
4）掌握jQuery对象的addClass()方法；
5）如何获取指定元素的值？
6）如何设置元素的显示和隐藏？
7）如何设置元素的html代码？
2. 需求说明
制作显示如下图所示的QQ聊天页面。随机用户在文本框中输入文本后点击“发送”按钮，文本中的消息将显示在“聊天记录区域”中。聊天记录区域列表显示发消息人的头像、姓名和消息内容。
3. 实现思路
1）首先定义两个数组，用来存储图片headImg和QQ昵称uName。
2）If条件判断文本框中是否有内容，如果没有内容则用alert提示不能发送空白信息。
3）Math.random()获取随机数，使图片headImg和QQ昵称uName随机出现。
4）将每一次输入进行累加，不然下一次输入会覆盖上一次输入的信息，导致实现不了多条信息发送效果。
5）使用addClass()方法设置发送后的文本属性。
6）并在发送后使用val()方法清空文本框。
4. 实现代码
// JavaScript Document
$(document).ready(function(e) {
var headImg=new Array("qq1.jpg","qq2.jpg","qq3.jpg","qq4.jpg","qq5.jpg");
var uName=new Array("柒","米娅","松松","小虎","小鬼");
$("#send").click(function(e) {
if ($(".chatText").val().length>0){//判断输入框中是否有内容
var id=Math.floor(Math.random()*5);//随机获取头像和昵称
//设置头像、昵称、获取并设置输入的内容
var text="<section><div><img src=img/"+headImg[id]+"></div><p>"+uName[id]+"</p><div>"+$(".chatText").val()+"</div></section>";
var result=$(".chatBody").html()+"</br>"+text;
$(".chatBody").html(result);
$(".chatBody section div:last").addClass("chatContent");
$(".chatText").val("");//清除文本框中的内容
}
else{
alert("不能发送空白消息！");
}
});
});5. 运行结果
6. 其他代码
.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>QQ简易聊天框</title> <link rel="stylesheet" href="css/chat.css" > </head> <body> <section id="chat"> <div class="chatBody"></div> <div><img src="img/icon.jpg"></div> <textarea class="chatText"></textarea> <div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div> </section> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/chat.js"></script> </body> </html>
.css
*{margin: 0; padding: 0; line-height: 22px; font-family: "Arial", "微软雅黑";}
#chat{
margin: 3px auto 0 auto;
width:436px;
border: 1px #999999 solid;
background-image: url(../img/6.jpg);
}
.chatBody{
width: 100%;
height: 220px;
overflow:auto;
color: #069DD5;
}
.chatText{
border: none;
width: 100%;
height: 50px;
}
.btn{
text-align: right;
}
.btn span{
display: inline-block;
padding: 0 10px;
height: 25px;
overflow: hidden;
color: #ffffff;
border-radius: 5px;
background-color: #069dd5;
font-size: 12px;
margin-right: 3px;
cursor:pointer;
}
.chatBody div:first-of-type{
float: left;
width: 38px;
}
.chatBody p{
float: left;
font-size: 12px;
width:370px;
color: #0000ff;
}
.chatBody div:last-of-type{
float: left;
width: 370px;
font-size: 12px;
}
.chatBody section{
clear: both;
}
.chatContent{
background:#efefef;
border-radius: 5px;
padding: 3px;
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了js根据百度地图提供经纬度计算两点距离，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
其实在学习之前，就已经用上了js，jquery和ajax，不过当时不清楚这些的区别，就全都当成js来看，然后别人一说jquery，ajax都觉得好像很高级，等到自己学习的时候，倒是对这些更清楚了一点，下面就来写一下我的总结2016-01-01
async和await是我们进行Promise时的一个语法糖,async/await为了让我们书写代码时更加流畅,增强了代码的可读性,下面这篇文章主要给大家介绍了关于ES6中async函数与await表达式的基本用法,需要的朋友可以参考下2022-07-07
对表格的行和列都能加亮显示，而且点击单元格后会有更不同的表现...2008-12-12
input有个focus方法，今天发现就在onblur事件里面起作用，onchang等事件中根本不起作用的2010-03-03
highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解，感兴趣的朋友跟随脚本之家小编一起学习吧2017-09-09
Bootstrap基本插件学习笔记之Popover提示框(19)
这篇文章主要为大家详细介绍了Bootstrap基本插件学习笔记之Popover提示框的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
JavaScript中async await更优雅的错误处理方式
async/await中的异常处理很让人混乱,尽管有很多种方式来应对async 函数的异常,但是连经验丰富的开发者有时候也会搞错,所以这篇文章主要给大家介绍了关于JavaScript中async await更优雅的错误处理方式的相关资料,需要的朋友可以参考下2021-09-09
xmlplus 是一个JavaScript框架，用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之按钮，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要为大家详细介绍了javascript实现贪吃蛇经典游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-04-04
最新评论