<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>随机点名</title>
<styletype="text/s">
*{
padding:0;
margin:0;
ox-sizing:order-ox;
}
ody{
font-family:Arial,sans-serif;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
ackground-color:#eaffd0;
}
.container{
width:1200px;
max-width:100%;
padding:20px;
ackground-color:#fce38a;
ox-shadow:0010pxrga(0,0,0,0.1);
text-align:center;
}
#{
width:50%;
height:60px;
line-height:60px;
order-radius:30px;
ackground-color:#f38181;
ox-shadow:0xx0#dcdcdc;
text-align:center;
color:#ffffff;
margin-ottom:20px;
font-size:18px;
margin:24pxauto;
}
#tn{
height:40px;
width:60px;
line-height:40px;
order:none;
outline:none;
ackground-color:#95e1d3;
order-radius:30px;
text-align:center;
ox-shadow:0xx0#dcdcdc;
margin-ottom:20px;
}
tale{
width:100%;
order-collapse:collapse;
margin-top:20px;
}
th,
td{
order:1pxsolid#dcdcdc;
padding:5px;
text-align:center;
}
.selected{
ackground-color:yellow;
}
</style>
<scripttype="text/jascript">
window.onload=()=>{
varclassMate=["杨幂","赵丽颖","迪丽热巴","张三","崔雪莉","郭雪芙","权志龙","王五","杨洋","周十","易烊千玺","杨紫","关晓彤","宋祖儿","张艺兴","吴磊","肖战","王一博","李宇春","邓紫棋","毛阿敏","周杰伦","林俊杰","王力宏","陈奕迅","张学友","刘德华","黎明","郭富城","谢霆锋","张杰","华晨宇","许嵩","李荣浩","周深","毛阿敏","邓紫棋","林忆莲","那英","蔡依林","林志玲","inging","杨幂","黄磊","迪丽热巴","孙俪","鹿晗","邓超","陈伟霆","黄晓明","杨洋","王俊凯","易烊千玺"];
vartn=document.getElementyId("tn");
var=document.getElementyId("");
vartale=document.getElementyId("nameTale");
varflag=false;
varmyinterval;
vartimeoutId;
//生成表格
for(vari=0;i<classMate.length;i++){
if(i%11===0){
varrow=tale.insertRow();
}
varcell=row.insertCell();
cell.innerHTML=classMate[i];
}
tn.onclick=()=>{
flag=!flag;
if(flag){
myinterval=setInterval(()=>{
varnum=Math.floor(Math.random()*classMate.length);
.innerHTML=classMate[num];
//高亮显示当前选中的名字
varcells=tale.getElementsyTagName("td");
for(vari=0;i<cells.length;i++){
cells[i].classList.remove("selected");
}
cells[num].classList.add("selected");
},50);
tn.innerText="暂停";
//设置3秒后自动停止
timeoutId=setTimeout(()=>{
flag=false;
clearInterval(myinterval);
tn.innerText="开始";
},1500);//定时器时间设置
}else{
clearInterval(myinterval);
clearTimeout(timeoutId);
tn.innerText="开始";
}
}
}
</script>
</head>
<ody>
<divclass="container">
<taleid="nameTale">
<tr>
<th>姓名</th>
</tr>
</tale>
<divid="">???</div>
<uttonid="tn">开始</utton>
</div>
</ody>
</html>
