js ——简单实现聊天窗口 ——互发消息

泽泽泽Ya

已于 2022-09-08 08:57:41 修改

阅读量761

点赞数 2

分类专栏： js学习文章标签： javascript 前端 html

于 2022-08-03 21:51:19 首次发布

本文链接：https://blog.csdn.net/weixin_48466991/article/details/126149517

版权

js学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

如何用js代码实现聊天窗口

先看效果

在这里插入图片描述

废话少说，直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#ll{
				width: 500px;
				height: 500px;
				border: 1px solid red;
			}
			
		</style>
	</head>
	<body>
		<div  id="ll">
			
		</div>
		<input type="text" name="" id="sr">
		<button onclick="test()">发送</button>
		
		<script>
			var _sr=document.querySelector("#sr");
			var _ll=document.querySelector("#ll");
			var cs=1;
			var mz=new Array("张三","李四","王五","刘六");
			var img=["img/picsa (1).png","img/picsa (2).png","img/picsa (3).png","img/picsa (4).png","img/picsa (5).png"];
			
			function test(){
				var t;
				var g;
				var mm=Math.floor(Math.random()*4)
				var nn=mz[mm];
				var tp=Math.floor(Math.random()*5)
				var bb=img[tp];
				if(cs%2==0){
					_ll.innerHTML=`${_ll.innerHTML}<p id="rr" style="text-align:left;"><img style="width: 30px;height: 30px; vertical-align: middle;" src="${bb}" alt="">${nn}:${_sr.value}</p>`;
					_sr.value="";
				}
				if(cs%2!=0){
					_ll.innerHTML=`${_ll.innerHTML}<p id="ee" style="text-align:right;">${_sr.value}:${nn}<img style="width: 30px;height: 30px; vertical-align: middle;" src="${bb}" alt=""></p>`
					_sr.value="";
				}
				cs++;
			}
			
			
		</script>
	</body>
</html>