点名案例
题目
HTML部分
//设置两个盒子
<h2>随机点名</h2>
<div class="box">
<span>我看看是那个天选之人是谁：</span>
<div class="qs">工号+姓名</div>
</div>
//设置两个按钮
<div class="btns">
<button class="start">开始</button>
<button class="end">结束</button>
</div>
css部分
* {
margin: 0;
padding: 0;
}
//使“随机点名”居中
h2 {
text-align: center;
}
.box {
width: 800px;
margin: 50px auto;
display: flex;
font-size: 25px;
line-height: 40px;
}
.qs {
width: 430px;
height: 40px;
color: red;
}
.btns {
text-align: center;
}
.btns button {
width: 120px;
height: 35px;
margin: 0 50px;
}
.restart {
display: block;
width: 120px;
height: 35px;
margin: 20px auto;
}
js部分
需要使用的函数
querySelector 在DOM中用于选择元素的函数，常用于数组的选择
addEventListener
element.addEventListener(event, listener[, options]);
其中，element 是要添加事件监听器的 DOM 元素，event 是要监听的事件类型（如 “click”、“keydown” 等），listener 是事件触发时要执行的回调函数。
setTimeout 允许我们将函数推迟到一段时间间隔之后再执行
setInterval 允许我们重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数
clearInterval 阻止后续调用
splice 于修改数组的内容。它可以用于从数组中添加、删除或替换元素。
//用数组添加需要抽取人的名字
let arr = ['01010104瑞哥', '01010105耀哥哥', '02010107李工', '00301016me']
//设置两个时间和数组随机取的字面量
let timerId = 0
let random = 0
//从css中选择该类元素，通过给元素添加类名，我们可以更方便地选择元素，而不是使用标记名、ID 或其他属性。
const start = document.querySelector('.start')
const qs = document.querySelector('.qs')
//赋予“点击”事件，设置重复循环函数
start.addEventListener('click', function () {
timeId = setInterval(function () {
random = parseInt(Math.random() * arr.length)//生成0到arr.length-1之间的浮点数
qs.innerHTML = arr[random]
}, 80)
//parseint将浮点转换为浮点数
})
// clearInterval 阻止后续调用
const end = document.querySelector('.end')
end.addEventListener('click', function () {
clearInterval(timeId);
})
restart.addEventListener('click', function () {
arr = ['01010104瑞哥', '01010105耀哥哥', '02010107李工', '00301016me']
start.disabled = false
end.disabled = false
})
//使按钮禁用
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
h2 {
text-align: center;
}
.box {
width: 800px;
margin: 50px auto;
display: flex;
font-size: 25px;
line-height: 40px;
}
.qs {
width: 430px;
height: 40px;
color: red;
}
.btns {
text-align: center;
}
.btns button {
width: 120px;
height: 35px;
margin: 0 50px;
}
.restart {
display: block;
width: 120px;
height: 35px;
margin: 20px auto;
}
</style>
</head>
<body>
<h2>随机点名</h2>
<div class="box">
<span>我看看是那个天选之人是谁：</span>
<div class="qs">工号+姓名</div>
</div>
<div class="btns">
<button class="start">开始</button>
<button class="end">结束</button>
</div>
<script>
let arr = ['01010104瑞哥', '01010105耀哥哥', '02010107李工', '00301016me']
let timerId = 0
let random = 0
const start = document.querySelector('.start')
const qs = document.querySelector('.qs')
start.addEventListener('click', function () {
timeId = setInterval(function () {
random = parseInt(Math.random() * arr.length)
qs.innerHTML = arr[random]
}, 1000)
})
const end = document.querySelector('.end')
end.addEventListener('click', function () {
clearInterval(timeId);
// arr.splice(random, 1)
// if (arr.length === 0) {
// start.disabled = true
// end.disabled = true
// }
})
restart.addEventListener('click', function () {
arr = ['01010104瑞哥', '01010105耀哥哥', '02010107李工', '00301016me']
start.disabled = false
end.disabled = false
})
</script>
</body>
</html>
