效果如图:
完整代码如下:
<!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>