js实现随机头像聊天框无外链

最新推荐文章于 2024-11-26 08:03:00 发布

原创最新推荐文章于 2024-11-26 08:03:00 发布 · 194 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

本文介绍如何利用JavaScript在前端实现无外链的随机聊天头像生成，适用于提升用户体验和减少对外部资源的依赖。

QQ录屏20220811185812

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wrapper {
				width: 420px;
				height: 550px;
				margin: 0 auto;
				border: 1px solid black;
				background-color: beige;
				background: url(img/1.jpeg);
				background-size: 100%;
			}

			#res {
				width: 380px;
				height: 470px;
				border: 1px solid grey;
				margin: 0 auto;
				margin-top: 10px;
			}

			input {
				width: 250px;
				height: 30px;
				margin-top: 10px;
				margin-left: 20px;
				
			}

			button {
				width: 80px;
				height: 30px;
				
			}

			img {
				width: 30px;
				height: 30px;
			}
		</style>
	</head>
	<body>
			<div class="wrapper">
				<div id="res"></div>
				<input type="text" name="" id="first" value="" />
				<button type="button" onclick="_second()">发送</button>
			</div>
			
		</body>
	
		<script>
			var _first = document.getElementById("first");
			var _res = document.getElementById("res");
			var names = ['大娃:', '二娃:', '三娃:', '四娃:', '五娃:', '六娃:', '七娃:'];
			var imgs = ['img/11.jpeg', 'img/22.jpeg', 'img/33.jpg', 'img/44.jpeg', 'img/55.jpeg', 'img/66.jpeg', 'img/77.jpeg'];
			var x=1;
			
			function _second() {
				
				var index = Math.floor(Math.random() * 7);
				var i = Math.floor(Math.random() * 7); //随机的图片下标
				
				if(x%2==0){
				_res.innerHTML += `<div style="text-align:right;">${_first.value}${names[index]}<img src="${imgs[i]}"/><br></div>`;
				
				}else{
					_res.innerHTML += `<div style="text-align:left;"><img src="${imgs[i]}"/>${names[index]}${_first.value}<br></div>`;
					
				}
				x++;
				_first.value = "";
			}
	
		</script>
</html>