简易聊天框的编写

最新推荐文章于 2025-05-12 14:43:13 发布

安澜~~

最新推荐文章于 2025-05-12 14:43:13 发布

阅读量304

点赞数 5

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_67223242/article/details/125211699

版权

这段代码实现了一个简单的HTML页面，包含一个输入框和按钮。当用户输入信息并点击按钮时，程序会在文本区域随机生成一个角色名字和对应的头像，并以左对齐或右对齐的方式显示用户输入的内容与角色的对话。角色名字和头像图片路径存储在两个数组中，每次点击按钮都会随机选取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#text1{
				width: 200px;
				height: 400px;
				border: 1px solid black;
				overflow: auto;
			}
			img{
				height: 30px;
				width: 30px;
				text-align: ;
			}
		</style>
	</head>
	<body>
		<div id="text1"></div>
		<input type="" id="user" value="">
		<button >send</button>
		<script>
			var _text1=document.getElementById("text1");
			var _user=document.getElementById("user");
			var _button=document.querySelector("button");
		
			var ary=['可莉',"万叶","刻晴","甘雨","钟离"];
			var ary1=['./img/1.jpg',"./img/2.jpg","./img/3.jpg","./img/4.jpg","./img/5.jpg"];
			var i=0;
			_button.onclick=function(){
				var index=Math.floor(Math.random()*5);
				var name=ary[index];
				var index1=Math.floor(Math.random()*5);
				var imgs=ary1[index];
				if(i%2==0){
				_text1.innerHTML=`<div style=text-align:left;>${_text1.innerHTML}<img src="${imgs}" alt="">${name}:${_user.value}<br></style>`;
				}else{
				_text1.innerHTML=`<div style=text-align:right;>${_text1.innerHTML}${_user.value}:${name}<img src="${imgs}" alt=""><br></style>`;	
				}
				i++;
				_user.value=null;
			}
			
		</script>
	</body>
</html>

效果图：