js实现简单聊天页面，图片随机名字随机

最新推荐文章于 2024-03-21 14:30:47 发布

意中人Crush

最新推荐文章于 2024-03-21 14:30:47 发布

阅读量319

点赞数 8

文章标签： HTML CSS JavaScript 随机生成图文组合

本文链接：https://blog.csdn.net/qq_69555866/article/details/125305753

版权

要求效果：

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#first{
				width: 250px;
				height: 300px;
				border:1px solid red;
				overflow:auto;
			}
			#first div:nth-of-type(2n){
				text-align:right;
				overflow:hidden;
			}
				
			#first div:nth-of-type(2n) img{
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="first"></div>
		<input id="second" type="text">
		<button id="third">send</button>
		<script>
			var _first=document.querySelector("#first");
			var _second=document.querySelector("#second");
			var _button=document.querySelector("#third");
			var names=['张三',"李四","王博","赵四","赵四龙"];
			var imgs=["./02/1.png","./02/2.png","./02/3.png","./02/4.png"];
			_button.onclick=function(){
				var index=Math.floor(Math.random()*5);
				g=names[index];
				var index1=Math.floor(Math.random()*4);
			    scc=imgs[index1];
				_first.innerHTML+=`<div><img src="${scc}" height="30">${g}${_second.value}</div>`;
				_second.value=null;
			}
		</script>
	</body>
</html>

效果展示：