JavaScript实现QQ聊天室功能

2024-12-21 14:39:25

本文实例为大家分享了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;
}

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

nodejs实现的一个简单聊天室功能分享

今天我来实现一个简单的聊天室,后台用nodejs, 客户端与服务端通信用socket.io,这是一个比较成熟的websocket框架. 初始工作 1.安装express, 用这个来托管socket.io,以及静态页面,命令npm install express --save,--save可以使包添加到package.json文件里. 2.安装socket.io,命令npm install socket.io --save. 编写服务端代码首先我们通过express来托管网站,并附加到socke
javascript实现简易聊天室

聊天室是我们经常见的,比如微信聊天界面.QQ聊天界面等等,一个简易的聊天室如下: 1.html代码 <div class="content"> <div class="section"></div> <form action="#"> <textarea id="$value"></textarea> <button type="butto
Node.js中使用socket创建私聊和公聊聊天室

先给大家展示效果图: 在上篇文章给大家介绍使用Angular和Nodejs.socket.io搭建聊天室及多人聊天室,本文继续介绍Node.js中使用socket创建私聊和公聊聊天室,具体详情请看下文吧. nodejs的应用中,关于socket应该是比较出彩的了,socket.io在github上有几万人的star,它的成功应该是不输于express的,为了方便了解整个socket.io的使用. 例子请点击http://chat.lovewebgames.com/ 源码下载https://git
JavaScript仿聊天室聊天记录

本文实例为大家分享了js仿聊天室聊天记录的具体代码,供大家参考,具体内容如下参考样式(css自定义聊天窗口样式):http://xiazai.jb51.net/201612/yuanma/css3chatstyle(jb51.net).rar 功能描述: 1. 用户在微信公众号里发送内容,参与活动 2. 后台提供类似聊天室的窗口显示用户实时发布的内容界面截图: 代码: body { padding: 0; margin: 0; background: -moz-linear-gradient
NodeJS实现一个聊天室功能

看效果一直说我喜欢卖关子,这次直接看效果: 聊天界面(喜欢的可以自己画一个比较逼真的页面) 前文先说一下为什么写这个东西,最近不是在写NodeJS知识点的梳理嘛,但是我发现梳理的过程着实无聊的要死,虽然已经快梳理一半了,只是还没发布,这个不重要,重要的是不做点什么东西确实无聊,所以今天把我做这个的过程记录给你们看一下,喜欢的可以拿去玩玩.实现的功能是可以聊天,可以显示用户自定义的昵称,并且显示发送时间 PS:这个功能如果我们使用webstorm新建一个express app的项目的话,是可以
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室

为更好的运用这两天学到的Ajax的相关的知识,就做了个简单的在线网络聊天室. 思路实现聊天室,基本上就是通过Ajax来传递数据,让PHP来实现对数据的差入和查找,再交给前端JavaScript实现页面的更新,达到即时聊天的功能. 消息显示区消息显示区就是一个DIV块,我们会借助Ajax获取到服务器端信息之后,使用JavaScript来更新页面. <h3>消息显示区</h3> <div id="up"> </div> <hr /&
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室

一,利用Node搭建静态服务器这个是这个项目的底层支撑部分.用来支持静态资源文件像html, css, gif, jpg, png, javascript, json, plain text等等静态资源的访问.这里面是有一个mime类型的文件映射. mime.js /** * mime类型的 map * @ author Cheng Liufeng * @ date 2014/8/30 * 当请求静态服务器文件的类型 html, css, gif, jpg, png, javascript,
AngularJS+Node.js实现在线聊天室

不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍,对于基本的使用依然有很多说不清道不明的疑惑,于是决定通过做一个在线聊天室帮助理解.DEMO可以戳→chat room,代码可以戳→ChatRoom-AngularJS. 清晰图可以戳 http://files.jb51.net/file_images/article/201508/201508281040051.gif 功能着手开发之前,首先明确一
js编写简单的聊天室功能

这个聊天室写的特别简易,比较适合刚开始学习js的同学借鉴,当然,写的不好,也希望诸位大神可以进行批评改正. 聊天室要求: 1.不能发空消息 2.敏感字***显示 3.图片替换开心,尴尬 4.显示聊天内容和时间 5.每发一条信息,随机显示名称,先把一些名称定义到array里面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> &
Nodejs实现多房间简易聊天室功能

1.前端界面代码前端不是重点,够用就行,下面是前端界面,具体代码可到github下载. 2.服务器端搭建本服务器需要提供两个功能:http服务和websocket服务,由于node的事件驱动机制,可将两种服务搭建在同一个端口下. 1.包描述文件:package.json,这里用到了两个依赖项,mime:确定静态文件mime类型,socket.io:搭建websocket服务,然后使用npm install 安装依赖 { "name": "chat_room",