实现随机点名

最新推荐文章于 2023-11-16 23:59:17 发布

风止

最新推荐文章于 2023-11-16 23:59:17 发布

阅读量549

点赞数 1

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_56398485/article/details/126197409

版权

同学们上课都有被老师随机点名点到的尽力吧，今天就给大家看一下是如何做到随机点名的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#active{
				width: 300px;
				height: 300px;
				border: 1px solid red;
				border-radius: 50%;
				background-color: #F1F1F1;
				font-size: 30px;
				line-height: 300px;
				text-align: center;
				margin: 0 auto 20px;
				color: red;
			}
			button{
				display: block;
				width: 200px;
				height: 50px;
				font-size: 30px;
				margin:0 auto;
			}
		</style>
	</head>
	<body>
		<div id="active">等待抽取学员</div>
		<button id="btn">开始</button>
		
		<script type="text/javascript">
			var _active=document.querySelector("#active");
			var _btn=document.querySelector("#btn");	
			var k;
			_btn.onclick=function(){
				var c=_btn.innerText;
				if(c=="开始"){
					_btn.innerText="结束";
					k=setInterval(function(){
						var a=Math.ceil(Math.random()*66)+01;
						if(a<10){
							a="0"+a;
						}
						_active.innerHTML=a;
					},100)
				}
				if(c=="结束"){
					_btn.innerText="开始";
					clearInterval(k);
				}
			}
		</script>
	</body>
</html>

每次点一下开始都能够随机抽取一个幸运儿