用网页做一个类似效果的随机点名，
复制以下代码，然后新建一个index.html并把代码粘贴进去即可，然后打开文件就可以看到效果了。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>随机点名</title>
<style>
*{padding: 0;margin: 0;}
#name{width: 1200px;margin: 0 auto;display: flex;flex-wrap: wrap}
#name li{display: block;padding: 10px 15px;border: 4px solid #e3e3e3;width: 8%;margin:1%;color: green;background: #eee;font-weight: bold;text-align: center;font-size: 18px;box-sizing: border-box;}
#name div{width: 100%;text-align: center;}
#name button{padding: 10px 15px;display: inline-block;}
#name .active{border: 4px solid red;color: red;}
.item{margin: 100px auto;width: 1200px;}
.item input{padding: 0 5px;box-sizing: border-box;line-height: 35px;}
.item button{padding: 8px;}
.item #yz,.item #yz2{padding: 8px 15px;font-weight: bold;}
</style>
</head>
<body>
<ul id="name">
/* 这里写名字，每一个 <li>***</li> 是一个人的名字，<li>***</li>够用的时候在复制粘贴就好了，也可以把多余的删除 */
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
<li>孙琦</li>
<li>钱八</li>
<li>尧九</li>
<li>龙十</li>
<li>龙十一</li>
<li>张海的</li>
<li>李武辉</li>
<li>王大狗</li>
<li>赵茜</li>
<li>孙悟空</li>
<li>猪八戒</li>
<li>唐三藏</li>
<li>沙和尚</li>
<li>白龙马</li>
<li>唐太宗</li>
<li>李世民</li>
<li>贾宝玉</li>
<li>秦始皇</li>
<li>赵匡胤</li>
<li>康熙</li>
<li>乾隆</li>
<li>魁拔</li>
<li>百丽</li>
<li>黑煤化</li>
<li>唐唐</li>
<li>李隆基</li>
</ul>
<div style="text-align:center">
<button id="btn" style="display:inline-block;padding:10px 25px;border:1px solid red;border-radius:25px;background:orange;font-size: 18px;font-weight: bold;color: #fff;letter-spacing:2px;">开始点名</button>
</div>
<script>
/*
* 随机点名 start
*/
var btn = document.getElementById('btn');
var na = document.getElementById('name')
var lis = na.getElementsByTagName('li');
function names(){
var index = parseInt(Math.random()*30);
var ind = index;
for(var i = 0;i<lis.length;i++){
lis[i].className = ''
}
lis[index].className = "active"
}
var a = true;
var nameStart;
btn.onclick= function(){
if(a){
nameStart = setInterval(names,0)
btn.innerHTML = '停止点名'
a = false;
}else{
clearInterval(nameStart)
btn.innerHTML = '开始点名'
a = true;
}
}
/*
* 随机点名 end
*/
</script>
</body>
</html>