其他分享
首页 > 其他分享> > JS点名器

JS点名器

作者：互联网

点名器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			body{
				background:black url(imges/a.png);
				
			}
			h2{
				font-size: 50px;
				text-align: center;
				margin-top: 100px;
				color: red;
			}
			
			#box{
				width: 1000px;
				border: 1px solid skyblue;
				margin: auto;
				display: flex;
				flex-wrap: wrap;
				position: relative;
				background-color: skyblue;
			}
			p{
				width: 100px;
				height: 50px;
				color: red;
				font-size: 30px;
				line-height: 50px;
				text-align: center;
			}
			#bt1{
				width: 100px;
				height: 50px;
				position: absolute;
				bottom: -100px;
				left: 200px;
			}
			#bt2{
				position: absolute;
				width: 100px;
				height: 50px;
				bottom: -100px;
				right: 200px;
			}
		</style>
	</head>
	<body>
		<h2>点名器</h2>
	<div id="box">
	<p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p>
	<p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p>
	<p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p>
	<p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p>
	<p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p>
	<p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p>
	<p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p>
	<p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p>
	<p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p>
	<p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p>
	<p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p>
	<p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p>
	<p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p>
	<p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p><p>张三</p>
			
		<button onclick="start()" id="bt1" >点名开始</button>
		<button onclick="end()" id="bt2">停止点名</button>
		</div>
		
	</body>
	<script type="text/javascript">
		var timmer=null;
		var timmer1=null;
		var random=0;
		var op=document.getElementsByTagName('p');
		var str=[];
			
		function start(){
			for(var i=0;i<op.length;i++){
				str[i]=op[i];
				str[i].style.backgroundColor='';
				}
			
			timmer=setInterval(function(){
//				随机字体颜色
				for(var i=0;i<str.length;i++){
				
				str[i].style.color=setColor();
			}
//				随机背景颜色
				
				random=parseInt(Math.random()*str.length);
			
				str[random].style.backgroundColor=setColor();
			timmer1=setTimeout(function(){
					str[random].style.backgroundColor='';
					
				},250)
			},300);
//			
			
		}
		 
function setColor(){
	var col='#'+parseInt(Math.random()*(0xffffff+1)).toString(16);
			return col;
		}
		function end(){
			
			clearInterval(timmer1);
			
			clearInterval(timmer);
		}
	</script>
</html>

图片a:
素材a
效果图：

初始：
在这里插入图片描述
运行：
在这里插入图片描述

标签：function,点名,random,100px,JS,str,var,三张
来源： https://blog.csdn.net/weixin_47917392/article/details/118055949