王者荣耀英雄随机数实现

最新推荐文章于 2024-08-28 23:30:29 发布

Moving up

最新推荐文章于 2024-08-28 23:30:29 发布

阅读量2.2k

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_62219063/article/details/123300925

版权

这是一个HTML页面示例，实现了点击按钮后背景颜色和显示的人物名字随机变化的效果。通过JavaScript生成随机数，从预定义的王者荣耀角色名字数组中选取名字，并结合颜色生成函数动态改变div元素的背景颜色和内容。点击开始按钮启动效果，再次点击则停止。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			div{
				width: 250px;
				height: 250px;
				background-color: skyblue;
				margin: 100px auto;
				text-align: center;
				line-height: 250px;
			}
			p{
				width: 100px;
				height: 50px;
				margin: 0 auto;
			}
			button{				
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div></div>
		<p>
			<button>开始</button>
		</p>
	</body>
	<script type="text/javascript">
		// 16、利用班级人名，随机数实现，显示不同颜色 对应 不同人名。
		var arr = ['孙尚香','钟无艳','阿珂','伽罗','公孙离','米莱狄','上官婉儿',
					'西施','杨玉环','瑶','元歌','花木兰','雅典娜','不知火舞',
					'娜可露露','夏洛特','安其拉','蔡文姬','嫦娥','妲己',
					'大乔','女娲','小乔','甄姬','芈月','李白','韩信','关羽',
					'兰陵王','周瑜','孙悟空','孙策','云中君','曹操','项羽',
					'鲁班七号','诸葛亮','蒙恬','马超','李信','盾山','司马懿']
		// console.log(arr.length);
		// 随机数
		
		
		// 获取元素
		var div = document.getElementsByTagName('div')[0];
		var btn = document.getElementsByTagName('button')[0];
		// console.log(div,btn);
		
		var a = 0;//定义按钮当前的状态，如果当前开始，那么按下后，变成结束
					// 如果当前结束，那么按下后，变成开始
		var time;
		console.log(a);
		// 注册一个鼠标带点击事件
		btn.onclick = function () {//这个函数连书写的是。事件处理程序。鼠标点击后要做什么事情
			// 事件处理程序
			
			// 需求 开始变成结束
			if(a == 0){
				clearInterval(time);
				// 为了使当前随机数自动运行，并且得到随机数进行，赋值，所以我们要使用
				// 间歇定时器
				time = setInterval(function(){
					var sj = Math.floor(Math.random() * arr.length);
					// console.log(a);//1随机数
					//console.log(arr[sj]);//查看是否能得到数组元素
					div.innerHTML = arr[sj];
					div.style.background = color();
					
				},100)
	
				btn.innerHTML = '结束';
				a = 1;//这里的a重新赋值，就是确定当前a的状态，再进行下一步状态
				console.log(a);//1
			}else{
				a = 0;
				// console.log(a);
				clearInterval(time);
				btn.innerHTML = '开始';
			}
		}
		function color(){
			var r = Math.round(Math.random() * 255).toString(16);
			// console.log(r);
			var g = Math.round(Math.random() * 255).toString(16);
			// console.log(g);
			var b = Math.round(Math.random() * 255).toString(16);
			// console.log(b);
			
			// #ab110e
			return '#' + (r.length < 2 ? '0' + r : r + (g.length < 2 ? '0' + g : g ) +(b.length < 2 ? '0' +b : b));
		}
		// var b= color()
		// console.log(b);
		
	</script>
</html>