用js写一个简单的聊天室_js 聊天空消息不发送-CSDN博客

本文链接：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>