原生JavaScript随机点名表

效果:

在这里插入图片描述

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
    
    
				width:300px;
				height:200px;
				border:1px solid #ccc;
				/*position: absolute;
				left:0;
				right:0;
				top:0;
				bottom:0;
				margin: auto;*/
				margin: 100px auto;
				text-align: center;
			}
			h1{
    
    
				width:150px;
				height:60px;
				line-height: 60px;
				text-align: center;
				font-size: 30px;
				background-color: red;
				margin: 10px auto;
			}
			button{
    
    
				width:100px;
				height:40px;
				background-color: dodgerblue;
				border:0;
				font-size: 24px;
				color:#fff;
			}
			
			
		</style>
	</head>
	<body>
		<div class="box">
			<h1></h1>
			<button>开始</button>
			<button>停止</button>
		</div>
		<script>
			var h1=document.getElementsByTagName('h1')[0];
			var btn=document.getElementsByTagName("button");
			var arr=["苏晨旭","张志阳","小明","社会坤哥","药","敬珍","锦涛","网管","社会辰哥","渣男","雪","宝贝曼","大个","睡神","龙爷","英儿","东北娃","珂珂","黄花大闺女","狗蛋","狗子","天娇","志强","晋玮","海涛","迈姐","新凤","环姐","二狗"];
			
			var ind=ranFun(0,arr.length-1)
			
			h1.innerHTML=arr[ind];
			var timer;
			btn[0].onclick=function(){
    
    
				clearInterval(timer)
				timer=setInterval(function(){
    
    
					h1.innerHTML=arr[ranFun(0,arr.length-1)]
				},100)
			}
			
			btn[1].onclick=function(){
    
    
				clearInterval(timer)
			}
			
			function ranFun(a,b){
    
    
				return Math.floor(Math.random()*(b-a+1)+a)
			}
		</script>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/dongdongaa0/article/details/112506455
今日推荐