<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a {
width: 200px;
height: 150px;
margin: 0 auto;
border: 1px solid rgb(22, 21, 21);
}
.b {
width: 200px;
height: 120px;
line-height: 120px;
text-align: center;
font-size: 25px;
background-color: #99e74c;
}
button {
width: 200px;
height: 30px;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
点击按钮点名
</div>
<button>随机点名</button>
</div>
<script>
var stus = [];
var count = 15;
for (var i = 0; i < count; i++) {
stus[i] = "学生" + (i + 1);
}
document.querySelector("button").onclick = function () {
var random = parseInt(Math.random() * stus.length);
document.querySelector(".b").innerText = stus[random];
stus.splice(random, 1);
if (stus.length == 0) {
this.disabled = true;
document.body.firstElementChild.lastElementChild.innerHTML = "点名完毕";
}
}
</script>
</body>
</html>