用js写一个简单的聊天室

最新推荐文章于 2023-10-30 09:46:47 发布
最新推荐文章于 2023-10-30 09:46:47 发布
阅读量1.8k 收藏 5
点赞数
分类专栏： 前端开发经验总结录 文章标签： javascript 聊天 图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39585562/article/details/77140852
版权

这个聊天室写的特别简易，比较适合刚开始学习js的同学借鉴，当然，写的不好，也希望诸位大神可以进行批评改正

聊天室要求


1.不能发空消息
2.敏感字***显示

3.图片替换 开心，尴尬
4.显示聊天内容和时间
5.每发一条信息，随机显示名称，先把一些名称定义到array里面


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				box-sizing: border-box;
			}
			.left{
				float: left;
				width: 20%;
				height: 650px;
				color: red;
				border: 1px solid red;
				border-right: 20px solid cornflowerblue;
			}
			.center{
				position: relative;
				float: left;
				width: 60%;
				height: 650px;
				border: 1px solid darkcyan;
			}
			.chatList{
				width: 100%;
				height: 500px;
				overflow-y: scroll;
			}
			.bottom{
				position: absolute;
				width: 100%;
				height: 150px;
				left: 0;
				bottom: 0;
				background: skyblue;
			}
			.bottom textarea{
				width: 70%;
				height: 100%;
				font-size: 18px;;
				vertical-align: middle;
				border: 1px solid red;
				background: blanchedalmond;
			}
			.bottom input{
				width: 80px;
				height: 40px;
				margin-left: 30px;
			}
			.right{
				float: right;
				color: #000000;
				border-right: 0;
				border-left: 20px solid cornflowerblue;
			}
		</style>
	</head>
	<body οnlοad="loadTime()">
		<div class="left" id="left">
			
		</div>
		<div class="center" id="center">
			<div class="chatList" id="chatList">
				
			</div>
			<div class="bottom">
				<textarea id="content" name="content" ></textarea>
				<input type="button" name="send" id="send" value="点击发送" οnclick="sendMessage()" />
			</div>
		</div>
		<div class="left right">
			<p>1.不能发空消息</p>
			<p>2.敏感字***显示</p>
			<p>3.图片替换 开心，尴尬</p>
			<p>4.显示聊天内容和时间</p>
			<p>5.每发一条信息，随机显示名称，先把一些名称定义到array里面</p>
		</div>
		
	</body>
	<script type="text/javascript">
//		document.getElementById("chatList").scrollHeight;
	/*
		 添加敏感字替换成**---8.10
	 * */
		function loadTime(){
			var time = new Date();
			
			var hours = (time.getHours()).toString();
			if(hours.length < 2){
				hours = "0" + hours;
			}
			var minutes = (time.getMinutes()).toString();
			if(minutes.length < 2){
				minutes = "0" + minutes;
			}
			var seconds = (time.getSeconds()).toString();
			if(seconds.length < 2){
				seconds = "0" + seconds;
			}
			var timeReturn = hours + ":" + minutes + ":" + seconds;
			document.getElementById("left").innerHTML = timeReturn;
			return timeReturn;
		}
		setInterval("loadTime()",1000);
		var chatContents = "";
		var count = 0;
		function sendMessage(){
			//通过调用randomName()函数来得到一个随机的名字
			var name = randomName();
			//通过调用randomColor()函数来得到一个随机的颜色
			var colorR = randomColor();
			//得到textarea中的内容
			var content = document.getElementById("content").value;
			//判断输入内容是否为空
			if (content == "") {
				alert("输入内容不能为空！！！");
				return;
			}
			//通过正则表达式来获取要替换的字符串
			var regExp = /藏独|台独|傻逼|你大爷/g;
			var regExp1 = /开心/g;
			var regExp2 = /尴尬/g;
//			var imgReplace = content.replace(regExp,"高兴");
			//获取开心图片路径
			var path1 = '<img src="img/chui.png"/>';
			//获取尴尬图片的路径
			var path2 = '<img src="img/mouse.png"/>';
			//敏感字替换；
			content = content.replace(regExp,"***");
			//将开心替换成开心图片的字符串；
//			txtReplace(content);
			var imgReplace = content.replace(regExp1,path1);
//			alert(imgReplace);
			//将尴尬替换成尴尬图片的字符串；
			imgReplace = imgReplace.replace(regExp2,path2);
//			alert(imgReplace);
			var chatContent = "<span>"+ name + ":" + "</span>" + " " + imgReplace;
//			字符串拼接聊天记录
			chatContents =chatContents + chatContent + " " + loadTime() +"<br/>";
			document.getElementById("chatList").innerHTML = chatContents;
			//点击发送后，textarea中的内容设为空
			document.getElementById("content").value = "";
			var txtColor = document.getElementsByTagName("span")[count];
			count++;
			//设置span的随机颜色
			txtColor.style.color = colorR;
		}
		function randomName(){
			var i = parseInt(Math.random() * (6 - 0 + 1) + 0);
			var arrName = new Array("果果","六六","格格","明明","小花","兰兰","花花");
			return arrName[i];
		}
		function randomColor(){
			var r = parseInt(Math.random() * (255 - 0 + 1) + 0).toString(16);
			if(r.length < 2){
				r = "0" + r;
			}
			var g = parseInt(Math.random() * (255 - 0 + 1) + 0).toString(16);
			if(g.length < 2){
				g = "0" + g;
			}
			var b = parseInt(Math.random() * (255 - 0 + 1) + 0).toString(16);
			if(b.length < 2){
				b = "0" + b;
			}
			return "#" + r + g + b;
		}
		
	</script>
</html>


蒲小若
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript仿聊天室聊天记录
11-28
本文实例为大家分享了js仿聊天室聊天记录的具体代码，供大家参考，具体内容如下 参考样式（css自定义聊天窗口样式）：http://xiazai.jb51.net/201612/yuanma/css3chatstyle(jb51.net).rar 功能描述： 1. 用户在微信公众号里发送内容，参与活动 2. 后台提供类似聊天室的窗口显示用户实时发布的内容 界面截图： 代码： body { padding: 0; margin: 0; background: -moz-linear-gradient(-45deg, #183850 0, #183850 25%, #192c46 5
webscoket（简单的在线通讯）
一头雾水一脸懵逼
01-25 1108
web环境：java ee7.0或以上                         #content{width:600px;height:200px;}                                                                                          
Django使用WebSocket
信橙则灵的博客
07-27 5008
WebSocket 是什么？协议django 中实现 WebSocket， channels 组件单独连接和收发数据手动创建列表 & channel layers运维&运维开发的同学，使用 WebSocket 实现代码发布系统项目。
javascript实现聊天窗口滚动条总在最下面的方法
hxstream的专栏
12-30 3042
javascript实现聊天窗口滚动条总在最下面的方法    function addMessage(message){        var chatArea=document.getElementById("chatArea");        chatArea.innerHTML += message+ ;        chatArea.sc
简易聊天室代码分享 js+socket.io
你好呀，很高兴你在看这里~
12-15 2031
js+node+socket.io 只是单纯的代码分享哈，不算正式文章~只是单纯的代码分享哈，不算正式文章~只是单纯的代码分享哈，不算正式文章~重要的话说三遍。
js编写简单的聊天室功能
12-12
在本文中，我们将探讨如何使用JavaScript（简称JS）来创建一个简易的聊天室功能。这个项目非常适合初级JS学习者作为实践案例，同时也欢迎经验丰富的开发者提出建议和改进。 首先，我们需要理解HTML结构，可以看到...
Node.js制作简单聊天室
12-23
看了TCP的有关知识，写了个基于NET的聊天室。 var net = require('net'); var count = 0, users = {}; var server = net.createServer(function (conn) { console.log('连接到'); conn.write( "\r\n > welcome ...
RedisChat:一个用nodejs写的简单聊天测试redis pubsub
07-14
RedisChat 一个用nodejs写的简单聊天测试redis pub/sub安装您需要使用标准配置在本地安装 Redis $ git clone [git-repo-url] RedisChat$ cd RedisChat$ npm install$ node index.js
Secrets:一个简单的匿名聊天室
05-29
"Secrets:一个简单的匿名聊天室" 是一个基于JavaScript技术构建的在线应用，它提供了一个让用户可以匿名交流的平台。这个应用可能使用了Web开发的基本技术栈，包括HTML、CSS和JavaScript，其中JavaScript是核心，...
用ＰＨＰ和ＡＣＣＥＳＳ写聊天室(四)
12-17
标题 "用PHP和ACCESS写聊天室(四)" 描述了一个使用PHP编程语言和ACCESS数据库创建聊天室的过程。在这个第四部分的教程中，作者展示了如何处理用户登录、删除空房间以及管理权限等核心功能。 首先，代码通过`@odbc_...
JavaScript实现服务端客户端聊天室(附完整源码)
最新发布
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-30 62
JavaScript实现服务端客户端聊天室(附完整源码)
js实现简单版聊天室【2021.10.8】
masierty的博客
10-08 1831
一、思路 获取标签 绑定点击事件：onclick 先检查是否消息为空，为空显示提示，不为空发送消息 获取text（文本框）的value（消息） 将消息写入展示盒子的HTML里面 二、成品展示 三、代码部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content.
WebSocket原生JavaScript实现简易聊天室
SilentLand的博客
06-10 2094
websocket原生javascript实现一个简易的聊天室
js实现聊天室
席伟娜的专栏
03-08 8634
超级简单实现聊天室，我用的是js+dom+php+mysql+ajax实现聊天室。 思路： 1、实现登录页面（如果您有更好的办法可以说下，我没想好是否需要这个页面） 2、假如登录成功则进入主聊天室，效果图在线面，在此页面我费了很大的功夫才实现这些效果。因为没一个功能要的都是时间和精力，有时一个单词写错都要好久才能弄好。 因此我认为一个好的程序员要有好的耐心和细心，还要有精明的头脑。 ...
js+html+css实现本地聊天室
zyf19971112的博客
09-04 6339
欢迎访问我的个人博客：http://mrzyf.club. 代码完成效果： 话不多说，直接上代码—— css代码： &lt;style type="text/css"&gt;             .talk_con {                 width: 600px;                 height: 700px;                 bord...
JavaScript制作简易聊天窗口
qq_60012576的博客
06-15 1320
JavaScript 聊天窗口
html按钮实现聊天功能实现原理,javascript实现简易聊天室_亦心_前端开发者
weixin_42261068的博客
06-02 814
聊天室是我们经常见的，比如微信聊天界面、QQ聊天界面等等，一个简易的聊天室如下：1.发送2..content{border-radius: 5px;border: 2px solid #cccccc;width: 500px;height: 700px;margin: 50px auto 0;overflow: hidden;}.section{width: 500px;height: 569px...
js实现模拟聊天框
Z137683915的博客
03-28 690
【代码】js实现模拟聊天框。
使用nodejs+Socket打造P2P实现多人聊天室
零小唬的博客
05-01 2003
使用nodejs+Socket打造P2P实现多人聊天室
node.js写一个终端聊天室
06-07
好的，以下是简单的node.js终端聊天室实现： 1. 创建一个文件夹，命名为`terminal-chatroom`，在该文件夹下创建一个`server.js`文件和一个`client.js`文件。 2. 在`server.js`中，使用`net`模块创建一个TCP服务器，监听指定端口并处理连接请求。代码如下： ```javascript const net = require('net'); const server = net.createServer(socket => { // 新客户端连接时触发该事件 console.log(`Client ${socket.remoteAddress}:${socket.remotePort} connected.`); // 监听客户端发送的数据 socket.on('data', data => { console.log(`Received data from client ${socket.remoteAddress}:${socket.remotePort}: ${data.toString()}`); // 广播消息给所有客户端 server.connections.forEach(conn => { if(conn !== socket) { conn.write(`Client ${socket.remoteAddress}:${socket.remotePort}: ${data}`); } }); }); // 监听客户端断开连接事件 socket.on('end', () => { console.log(`Client ${socket.remoteAddress}:${socket.remotePort} disconnected.`); }); }); // 启动服务器，监听指定端口 server.listen(8888, () => { console.log('Server started, listening on port 8888.'); }); ``` 3. 在`client.js`中，使用`net`模块创建一个TCP客户端连接到服务器。代码如下： ```javascript const net = require('net'); const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, output: process.stdout }); // 连接到服务器 const client = net.connect({port: 8888}, () => { console.log('Connected to server.'); // 给服务器发送消息 rl.on('line', input => { client.write(input); }); }); // 监听服务器发送的数据 client.on('data', data => { console.log(`Received data from server: ${data}`); }); // 监听连接断开事件 client.on('end', () => { console.log('Disconnected from server.'); }); ``` 4. 打开终端，进入`terminal-chatroom`文件夹，先启动`server.js`，再启动多个`client.js`，即可在不同的终端窗口中进行聊天。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值