js点名器加随机颜色

最新推荐文章于 2022-04-19 10:25:42 发布

原创最新推荐文章于 2022-04-19 10:25:42 发布 · 334 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js效果图专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用JavaScript创建一个具有随机颜色显示的点名器，提供了一个简单的实现效果。

点名器加随机颜色

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background: black;
		}
		div{
			float: left;
		}
		.jingrengong{
			/*position: absolute;*/
			/*top: 100px;*/
			/*left: 150px;*/
			margin-right: 20px;
		}
		.cininggong{
			/*position: absolute;*/
			/*top: 100px;*/
			/*right: 150px;*/
			margin-right: 20px;

		}
		ul{
			overflow: hidden;
		}
		li{
			list-style-type: none;
			float:left;
			width: 120px;
			height: 80px;
			background: red;
			margin-left: 14px;
			margin-top: 14px;
			text-align: center;
			line-height: 80px;
			color: white;
			font-size: 24px;
		}
		/*.noBg{
			background: none;
		}*/
		.l{
			/*margin-left: 148px;*/
		}
		button{
			width: 100px;
			height: 60px;
			background: #acacac;
			/*color: #f80;*/
			font-size: 20px;
			border: 0;
			float: left;
			margin-top: 20px;
			margin-left: 380px;
		}
	</style>
</head>
<body>
	<div class="jingrengong">
		<ul>
			<li>111</li>
			<li>222</li>
		</ul>
		<ul>
			<li>333</li>
			<li>444</li>
		</ul>
		<ul>
			<li>555</li>
			<li>666</li>
		</ul>
		<ul>
			<li>777</li>
			<li>888</li>
		</ul>
		<ul>
			<li>999</li>
			<li>1010</li>
		</ul>
	</div>
	<div class="cininggong">
		<ul>
			<li>aa</li>
			<li>bb</li>
		</ul>
		<ul>
			<li>cc</li>
			<li>dd</li>
		</ul>
		<ul>
			<li>ee</li>
			<li>ff</li>
		</ul>
		<ul>
			<li>gg</li>
			<li>hh</li>
		</ul>
		<ul>
			<li>ii</li>
			<li>jj</li>
		</ul>
	</div>
		<div class="cininggong2">
		<ul>
			<li>kk</li>
			<li>ll</li>
		</ul>
		<ul>
			<li>mm</li>
			<li>nn</li>
		</ul>
		<ul>
			<li>oo</li>
			<li>pp</li>
		</ul>
		<ul>
			<li>qq</li>
			<li>rr</li>
		</ul>
		<ul>
			<li>ss</li>
			<li>tt</li>
		</ul>
		
	</div>
	<button>点名</button>
</body>
<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script>
	var oLi = document.getElementsByTagName('li');
	var btn = document.getElementsByTagName('button');
	var time = null;
	for(var i=0;i<oLi.length;i++){
		var r = Math.round(Math.random()*255);
	var g = Math.round(Math.random()*255);
	var b = Math.round(Math.random()*255);
		oLi[i].style.background = "rgb("+r+","+g+","+b+")";
	}
	//点击之后，所有li变暗，然后开始随机点亮某一个位置
	btn[0].onclick = function(){
		clearInterval(time);
		function light(){
		for(var i=0;i<oLi.length;i++){
				oLi[i].style.opacity = 0.3;
		}
			var x = Math.round(Math.random()*29);2
			console.log(x);
		oLi[x].style.opacity = 1;
		}
		time = setInterval(light,50);
//		//4秒后停止
		setTimeout(stop,4000);
		function stop(){
			console.log("点名停止")
			clearInterval(time);
	}
		}
</script>
</html>