随机点名器

最新推荐文章于 2024-05-20 15:17:08 发布

北风吹画州

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量164

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_59359854/article/details/125719913

版权

点名器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 200px;
				margin: auto;
				margin-top: 20px;
			}
			.box div{
				background: red;
				color: #fff;
				width: 100%;
				height: 80px;
				text-align: center;
				line-height: 80px;
				font-size: 18px;
			}
			.box button{
				width: 100%;
				height: 35px;
				text-align: center;
				margin-top: 10px;
				border: 0px;
				background: blue;
				color: #fff;
			}
			
		</style>
	</head>
	<body>
		
		<div class="box">
			  <div id="realname">???</div>
			  <button onclick="call()" id="btn">开始</button>
		</div>
		
		<script>
			
			var realnames = ["张三","李四","赵六","王五","陆七","王二麻","狗剩"];
			var realname  = document.getElementById("realname");
			var flag = false;
			var btn = document.getElementById("btn");

			function call(){
				flag = !flag;
                if(flag){
						window.myInter = setInterval(function(){
							var num = Math.floor(Math.random()*realnames.length);
							realname.innerHTML = realnames[num];
						},100); 
						btn.innerText = "暂停";
				}else{
					clearInterval(window.myInter);//清除定时器
					btn.innerText = "开始";
				}
			}
			
		</script>

	</body>
</html>