随机点名器实现-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45921597/article/details/127097919

效果如图：

完整代码如下：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>随机点名器</title>
	<style type="text/css">
		#box {
			margin: auto;
			width: 550px;
			font-size: 66px;
			height: 94px;
			color: #138eee;
			text-align: center;
			margin-top: 250px;
		}

		#bt {
			margin: auto;
			width: 200px;
			text-align: center;
			margin-top: 75px;
			color: aquamarine;
			font-size: 25px;
			cursor: pointer;
		}
	</style>
</head>

<body>
	<div id="box">准备好点名了吗</div>
	<div id="bt">开始点名</div>

</body>
<script>
	var bt = document.getElementById("bt");
	var namelist = ['王俊凯', '王源', "易烊千玺", "张云龙", "华晨宇", "许凯", "龚俊", "白鹿", "周杰伦", "董子健", "张一山", "关晓彤", "鹿晗","王大陆" ,'赵露思','刘昊然','孟超','谭松韵','庄文杰','邬童','李想','王凯利','杨幂','郭麒麟','贾玲','沈腾','陈晓','王一博','肖战','班小松','尹柯']
	var mytime = null;
	function doit() {
		if (mytime == null) {
			bt.innerHTML = "停止点名";
			show();
		} else {
			bt.innerHTML = "开始点名";
			clearInterval(mytime);
			mytime = null;
		}
	}
	bt.onclick = function () {
		doit();
	}
	function show() {
		var box = document.getElementById("box");
		var num = Math.floor(Math.random() * 100000) % namelist.length;
		box.innerHTML = namelist[num];
		mytime = setTimeout("show()", 1);
	}
</script>

</html>