为什么大学不教 JavaScript ？
预览效果
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>随机点名</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #eaffd0;
}
.container {
width: 1200px;
max-width: 100%;
padding: 20px;
background-color: #fce38a;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
#info {
width: 50%;
height: 60px;
line-height: 60px;
border-radius: 30px;
background-color: #f38181;
box-shadow: 0 3px 3px 0 #dcdcdc;
text-align: center;
color: #ffffff;
margin-bottom: 20px;
font-size: 18px;
margin: 24px auto;
}
#btn {
height: 40px;
width: 60px;
line-height: 40px;
border: none;
outline: none;
background-color: #95e1d3;
border-radius: 30px;
text-align: center;
box-shadow: 0 3px 3px 0 #dcdcdc;
margin-bottom: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th,
td {
border: 1px solid #dcdcdc;
padding: 5px;
text-align: center;
}
.selected {
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = () => {
var classMate = ["杨幂", "赵丽颖", "迪丽热巴", "张三", "崔雪莉", "郭雪芙", "权志龙", "王五", "杨洋", "周十", "易烊千玺", "杨紫", "关晓彤", "宋祖儿", "张艺兴", "吴磊", "肖战", "王一博", "李宇春", "邓紫棋", "毛阿敏", "周杰伦", "林俊杰", "王力宏", "陈奕迅", "张学友", "刘德华", "黎明", "郭富城", "谢霆锋", "张杰", "华晨宇", "许嵩", "李荣浩", "周深", "毛阿敏", "邓紫棋", "林忆莲", "那英", "蔡依林", "林志玲", " Bingbing", "杨幂", "黄磊", "迪丽热巴", "孙俪", "鹿晗", "邓超", "陈伟霆", "黄晓明", "杨洋", "王俊凯", "易烊千玺"];
var btn = document.getElementById("btn");
var info = document.getElementById("info");
var table = document.getElementById("nameTable");
var flag = false;
var myinterval;
var timeoutId;
// 生成表格
for (var i = 0; i < classMate.length; i++) {
if (i % 11 === 0) {
var row = table.insertRow();
}
var cell = row.insertCell();
cell.innerHTML = classMate[i];
}
btn.onclick = () => {
flag = !flag;
if (flag) {
myinterval = setInterval( () => {
var num = Math.floor(Math.random() * classMate.length);
info.innerHTML = classMate[num];
// 高亮显示当前选中的名字
var cells = table.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
cells[i].classList.remove("selected");
}
cells[num].classList.add("selected");
}, 50);
btn.innerText = "暂停";
// 设置3秒后自动停止
timeoutId = setTimeout( () => {
flag = false;
clearInterval(myinterval);
btn.innerText = "开始";
}, 1500); //定时器时间设置
} else {
clearInterval(myinterval);
clearTimeout(timeoutId);
btn.innerText = "开始";
}
}
}
</script>
</head>
<body>
<div class="container">
<table id="nameTable">
<tr>
<th>姓名</th>
</tr>
</table>
<div id="info">???</div>
<button id="btn">开始</button>
</div>
</body>
</html>
