分为上下两个部分，上方为显示区域，下方为控制区域。显示区域显示五十位群成员的学号和姓名，控制区域由开始和结束两个按钮 组成。点击开始按钮，显示区域里的内容开始滚动，点击结束按钮，内容滚动停止，随机显示一位成员的学号和姓名。
解：1.设置数组
（那个展示区好像是可以不用写的qwq）
2.存储定时器，用于后续清除
3.存储随机的学生索引
4.获取元素
5.绑定开始键的点击事件
（1）清除定时器；（2）启动定时器；（3）剩余一个学生的时候禁用button
5.绑定结束键的点击事件
（1）同上（1）；（2）移除当前选中的学生（当数组中有学生时）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
display: flex;
}
table {
/* border: 1px black solid; */
border-spacing: 0;
}
td,th {
border: 1px black solid;
width: 150px;
text-align: center;
}
h2 {
text-align: center;
}
.box2 {
width: 600px;
margin: 50px auto;
display: flex;
font-size: 25px;
line-height: 40px;
}
.screen {
width: 450px;
height: 35px;
color: black;
text-align: center;
}
.btns {
text-align: center;
}
.btns button {
width: 120px;
height: 35px;
margin: 0 50px;
}
</style>
</head>
<body>
<h2>成员名单</h2>
<div class="box1">
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
</thead>
<tbody class="b1">
</tbody>
</table>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
</thead>
<tbody class="b2">
</tbody>
</table>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
</thead>
<tbody class="b3">
</tbody>
</table>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
</thead>
<tbody class="b4">
</tbody>
</table>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
</thead>
<tbody class="b5">
</tbody>
</table>
</div>
<h2>随机点名</h2>
<div class="box2">
<div class="screen">学号 姓名</div>
</div>
<div class="btns">
<button class="start">开始</button>
<button class="end">结束</button>
</div>
<script>
// 设置数组
const arr = [
{
num:1,
name: '灰太狼'
},
{
num:2,
name: '红太狼'
},
{
num:3,
name: '焦太狼'
},
{
num:4,
name: '懒洋洋'
},
{
num:5,
name: '喜羊羊'
},
{
num:6,
name: '沸羊羊'
},
{
num:7,
name: '美羊羊'
},
{
num:8,
name: '小灰灰'
},
{
num:9,
name: '暖羊羊'
},
{
num:10,
name: '村长'
},
{
num:11,
name: '灰太狼'
},
{
num:12,
name: '红太狼'
},
{
num:13,
name: '焦太狼'
},
{
num:14,
name: '懒洋洋'
},
{
num:15,
name: '喜羊羊'
},
{
num:16,
name: '沸羊羊'
},
{
num:17,
name: '美羊羊'
},
{
num:18,
name: '小灰灰'
},
{
num:19,
name: '暖羊羊'
},
{
num:20,
name: '村长'
},
{
num:21,
name: '灰太狼'
},
{
num:22,
name: '红太狼'
},
{
num:23,
name: '焦太狼'
},
{
num:24,
name: '懒洋洋'
},
{
num:25,
name: '喜羊羊'
},
{
num:26,
name: '沸羊羊'
},
{
num:27,
name: '美羊羊'
},
{
num:28,
name: '小灰灰'
},
{
num:29,
name: '暖羊羊'
},
{
num:30,
name: '村长'
},
{
num:31,
name: '灰太狼'
},
{
num:32,
name: '红太狼'
},
{
num:33,
name: '焦太狼'
},
{
num:34,
name: '懒洋洋'
},
{
num:35,
name: '喜羊羊'
},
{
num:36,
name: '沸羊羊'
},
{
num:37,
name: '美羊羊'
},
{
num:38,
name: '小灰灰'
},
{
num:39,
name: '暖羊羊'
},
{
num:40,
name: '村长'
},
{
num:41,
name: '灰太狼'
},
{
num:42,
name: '红太狼'
},
{
num:43,
name: '焦太狼'
},
{
num:44,
name: '懒洋洋'
},
{
num:45,
name: '喜羊羊'
},
{
num:46,
name: '沸羊羊'
},
{
num:47,
name: '美羊羊'
},
{
num:48,
name: '小灰灰'
},
{
num:49,
name: '暖羊羊'
},
{
num:50,
name: '村长'
},
]
// 展示区
// 获取函数
const tbody1 = document.querySelector('.b1')
const tbody2 = document.querySelector('.b2')
const tbody3 = document.querySelector('.b3')
const tbody4 = document.querySelector('.b4')
const tbody5 = document.querySelector('.b5')
// 循环遍历学生信息
for (let i = 0; i < arr.length; i++) {
// 创建一行<tr>
const tr = document.createElement('tr')
// 给<tr>填充“学号+姓名”的单元格
tr.innerHTML = `
<td>${arr[i].num}</td>
<td>${arr[i].name}</td>
`
// 用i分组，把<tr>插入不同的tbody
if (i < 10) {
tbody1.appendChild(tr)
}
else if (i < 20) {
tbody2.appendChild(tr)
}
else if (i < 30) {
tbody3.appendChild(tr)
}
else if (i < 40) {
tbody4.appendChild(tr)
}
else if (i < 50) {
tbody5.appendChild(tr)
}
}
// 显示区
let timeId = 0 // 存储定时器ID，用于后续清除
let random = 0 // 存储随机选中的学生索引
// 获取元素
const screen = document.querySelector('.screen')
const start = document.querySelector('.start')
// 绑定开始键的点击事件
start.addEventListener('click', function () {
clearInterval(timeId) // 先清除之前的定时器（防止重复启动）
// 启动定时器
timeId = setInterval(function () {
// 随机选中
random = parseInt(Math.random() * arr.length)
// 在screen显示选中的学生信息
screen.innerHTML = `学号：${arr[random].num}
姓名：${arr[random].name}`
},100)
// 剩余一个学生时禁用开始键和结束键
if (arr.length === 1) {
start.disabled = end.disabled = true
}
})
// 获取元素
const end = document.querySelector('.end')
// 绑定结束键的点击事件
end.addEventListener('click', function () {
clearInterval(timeId) // 先清除之前的定时器（防止重复启动）
// 如果数组有学生移除当前选中的学生
if (arr.length > 0) {
arr.splice(random, 1) // 删除一个元素
}
})
</script>
</body>
</html>
第一遍复写
1.显示选中的学生信息${}大括号里的写错了（380，381行）
screen.innerHTML = `学号：${arr[random].num}
姓名：${arr[random].name}`
2.定时器书写不熟悉（376行）
timeId = setInterval(function () {
// 随机选中
random = parseInt(Math.random() * arr.length)
// 在screen显示选中的学生信息
screen.innerHTML = `学号：${arr[random].num}
姓名：${arr[random].name}`
},100)
