JS点名器

最新推荐文章于 2024-01-09 11:47:36 发布

向全栈冲

最新推荐文章于 2024-01-09 11:47:36 发布

阅读量930

点赞数

CC 4.0 BY-SA版权

分类专栏：小玩意文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47917392/article/details/118055949

小玩意专栏收录该内容

3 篇文章

订阅专栏

该博客介绍了如何使用JavaScript创建一个点名器，通过代码实现从一组名单中随机选择人员的功能。文中提供了点名器的初始状态和运行时的效果展示。

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

点名器

<!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>