<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
h1{
font-size: 80px;
}
.namebox{
width: 350px;
height: 150px;
border:3px solid hotpink;
font-size: 100px;
line-height: 150px;
text-align: center;
font-weight: bold;
font-family: '黑体';
}
.btn{
margin-top: 20px;
width: 140px;
height: 42px;
background-color: skyblue;
font-size: 24px;
outline:none;
border:none;
cursor: pointer;
}
</style>
<body>
<!-- center标签中的所有内容会自动居中 -->
<center>
<h1>随机点名</h1>
<div class="namebox">周杰伦</div>
<button class="btn">开始</button>
</center>
</body>
<script>
// 所有需要操作的标签获取
var btn = document.querySelector('.btn');
var namebox = document.querySelector('.namebox');
// 准备放很多姓名的数组
var nameArr = ['李治毅', '黎葵', '马文杰', '陈莹羽', '刘金容', '韦学发', '黄宏咏', '南昌黎', '张雪冰', '苏政宇', '王伟', '邹金城', '钟选龙', '蒲鸿泰', '陈洁珍', '钟杏坚', '蒙金连']
var timerId = 0
btn.onclick = function(){
if(btn.innerText === '开始'){
btn.innerText = '停止'
// 定时器
timerId = setInterval(function(){
// 从数组中获取一个随机姓名
// 获取随机下标
var index = parseInt(nameArr.length * Math.random())
// console.log(index);
var name = nameArr[index]
// 放在盒子中
namebox.innerText = name
}, 100)
}else{
btn.innerText = '开始'
// 让定时器停止
clearInterval(timerId)
}
}
</script>
</html>