用js做一个简易聊天器

最新推荐文章于 2024-07-29 11:53:27 发布

郭郭郭憨憨

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量243

点赞数 6

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/qq_59494319/article/details/125304202

版权

简易聊天器介绍：

聊天器的名字和头像完全随机，每点一次发送，出现的名字和头像都是随机的

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wrapper{
				width: 500px;
				margin: 0 auto;
			}
			.first{
				width: 300px;
				height: 400px;
				font-size: 20px;
				border: 1px solid red;
				overflow: auto;
			}
			input{
				width: 150px;
				height: 30px;
				font-size: 20px;
				overflow: auto;
				margin-top: 15px;
			}
			button{
				display: inline-block;
				height: 30px;
				font-size: 20px;
				vertical-align: middle;
			}
			img{
				width: 50px;
				height: 50px;
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="first"></div>
			<input type="text" name="chat">
			<button onclick="send()">发送</button>
		</div>
		<script>
			let i=0;
			a=document.querySelector(".first");
			b=document.querySelector("input");
			ary=['钟离','万叶','胡桃','宵宫','甘雨'];
			ary1=['./img/1.jpeg','./img/2.jpeg','./img/3.jpeg','./img/4.jpeg','./img/5.jpeg'];//图片地址
			function send(){
				let index=Math.floor(Math.random()*5);
				let name=ary[index];
				let index1=Math.floor(Math.random()*5);
				let img=ary1[index1];
				if(b.value==""||b.value==null||b.value==undefined){
					alert("请输入内容再发送！！");
				}else{
					if(i%2==0){
						a.innerHTML+=`<div style="height:50px;width:290px;text-align:left"><img src="${img}">${name}:${b.value}</div>`;
					}else{
						a.innerHTML+=`<div style="height:50px;width:290px;text-align:right">${b.value}:${name}<img src="${img}"></div>`;
					}
					i++;
					b.value="";
				}
			}
		</script>
	</body>
</html>