点名器

最新推荐文章于 2022-11-14 20:02:45 发布

ZZZ --- jh

最新推荐文章于 2022-11-14 20:02:45 发布

阅读量275

点赞数 2

分类专栏： JavaScript demo 文章标签： javascript

本文链接：https://blog.csdn.net/ZZZ___jh/article/details/108726384

版权

JavaScript 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

demo

19 篇文章 0 订阅

订阅专栏

点名器

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style>
			div{
				width: 800px;
				height: 400px;
				background-color: #7FFFD4;
				margin: 0 auto;
				float: left;
			}
			button{
				width: 50px;
				height: 50px;
				margin-left: 350px;
				margin-top: 10px;
			}
			ul{
				width: 800px;
				height: 300px;
			}
			li{
				list-style: none;
				float: left;
				width: 100px;
				height: 50px;
				line-height: 50px;
				background-color: pink;
				margin: 20px 20px 0 0;
				text-align: center;
			}
		</style>
	</head>
	<body onload="init()">
		<div>
			<button>随机点名</button>
			
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>10</li>
				<li>11</li>
				<li>12</li>
				<li>13</li>
				<li>14</li>
				<li>15</li>
				<li>16</li>
				<li>17</li>
				<li>18</li>
				<li>19</li>
				<li>20</li>
				<li>21</li>
			</ul>
		</div>
		
		<script>
			var obj = document.querySelector('button');
			var oli = document.querySelectorAll('li');
			
			var num = 0;
			obj.onclick = function (){
				index = setInterval(function (){
					for(var i = 0; i < oli.length; i++){
						oli[i].style.backgroundColor = "";
					}
					var arr=['a','b','c','d','e','f',0,1,2,3,4,5,6,7,8,9];
					var a1=arr[Math.floor(Math.random()*16)];
					var a2=arr[Math.floor(Math.random()*16)];
					var a3=arr[Math.floor(Math.random()*16)];
					var a4=arr[Math.floor(Math.random()*16)];
					var a5=arr[Math.floor(Math.random()*16)];
					var a6=arr[Math.floor(Math.random()*16)];
					var b = '#'+a1+a2+a3+a4+a5+a6;
					var a = Math.floor(Math.random()*oli.length);
					
					oli[a].style.backgroundColor = b;
					
					num++;
					console.log(num);
					if(num > 25){
						clearInterval(index);
					}
				},100);
				num = 0;
			}
			
		</script>
	</body>
</html>