JavaScript实现QQ聊天室功能
作者:今天我学习 发布时间:2024-04-19 09:47:53
标签:js,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;
}
来源:https://blog.csdn.net/weixin_48112113/article/details/119327132
0
投稿
猜你喜欢
- 前言对于文件的比较一般有几种,比如比较文件的内容,比较文件的大小,或者直接对比整个项目文件。特别是在项目的更新迭代中,可以通过该库来比较当前
- 本文实例讲述了Python读取一个目录下所有目录和文件的方法。分享给大家供大家参考,具体如下:这里介绍的是刚学python时的一个读取目录的
- 引子使用Django在服务器端写了一个API,返回一个JSON数据。使用Ajax调用该API:<!DOCTYPE HTML>&l
- mysql存储过程delimiter $DROP FUNCTION IF EXISTS `fun_convert`$CREATE DEFIN
- python 中的and从左到右计算表达式,若所有值均为真,则返回最后一个值,若存在假,返回第一个假值。or也是从左到有计算表达式,返回第一
- 一:背景以及项目结构介绍第一次将自己做的python爬虫项目打包成exe,搜了很多网上教程,大部分都是打包一个py文件的小demo,这里先给
- 本文实例讲述了Python中操作符重载用法。分享给大家供大家参考,具体如下:类可以重载python的操作符操作符重载使我们的对象与内置的一样
- 本文实例讲述了Python存取XML的常见方法。分享给大家供大家参考,具体如下:目前而言,Python 3.2存取XML有以下四种方法:1.
- 直接po截图和代码下面是CheckFormDemo.html<!DOCTYPE html><html><hea
- 前言终于能够挤出一点时间来总结最近学到的一些技术知识点了,博主这两周被居家隔离-集中隔离-居家隔离来回折腾,现在终于是得到解放能够空出的时间
- 平常在使用python命令过程中,基本上都是用来安装python库时才使用到在控制台的python命令。然而,python命令还有更多的妙用
- 1.__new__(cls, *args, **kwargs) 创建对象时调用,返回当前对象的一个实例;注意:这里的第一个参数是
- 问:如何让内联框架里面的网页背景透明?(用iframe嵌套一网页,怎么能够设置其背景为透明以便能显示父框架中网页的背景图?)答:这是需要 I
- 谁在用这些导航google是个大公司,全世界都有google的脚印,韩国的google动画效果非常不错,蓝色理想论坛里已经有人挖过来了,可惜
- mysql installer community 8.0.16.0安装图文教程,,供大家参考,具体内容如下一、下载mysql-instal
- 方法一、尽量使用复杂的SQL来代替简单的一堆 SQL.同样的事务,一个复杂的SQL完成的效率高于一堆简单SQL完成的效率。有多个查询时,要善
- 过渡效果在交互体验中的重要性不言而喻。以往我们使用js或Jquery添加或移除元素的类(class),搭配CSS中定义好的样式,再引用一些j
- 本文以实例形式较为详细的讲解了Python的多线程,是Python程序设计中非常重要的知识点。分享给大家供大家参考之用。具体方法如下:用过P
- SQL Server 2000安装问题集锦1、先把SQL Server卸载(卸载不掉也没有关系,继续下面的操作)2、把Microsoft S
- 多元正态分布(多元高斯分布)直接从多元正态分布讲起。多元正态分布公式如下:这就是多元正态分布的定义,均值好理解,就是高斯分布的概率分布值最大