功能要求
- 使用原生js实现一个简单随机点名器
- 点击开始按钮随机出现学生的名字且把学生的名字显示在页面上
- 已被选中的学生名字要排除后再继续后面的随机抽取
- 点击暂停后学生的名字显示在页面上，且在下面记录每一个被抽取出来学生的名字
效果图
1583579288(1).jpg
以下是主要代码实现：
if (isStrat) {
timer = setInterval(function () {
var num = parseInt(Math.random() * nameArr.length);
text.value = nameArr[num];
}, 30)
} else {
clearInterval(timer);
可以指定某人被选中的代码实现：
var flag = nameArr.includes("猫_叔");
if (flag) {
text.value = "猫_叔";
}
以下是全部代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机点名</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 400px;
height: 380px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
[type="button"] {
width: 200px;
height: 50px;
font-size: 20px;
outline: none;
border: 2px solid #000;
border-radius: 20px;
box-shadow: 10px 10px 5px #888888;
cursor: pointer;
margin-top: 100px;
}
[type="text"] {
font-size: 50px;
width: 600px;
padding: 20px 0;
border: 2px solid #000;
border-radius: 20px;
box-shadow: 10px 10px 5px #888888;
outline: none;
text-align: center;
}
ul {
list-style: none;
font-size: 50px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 100px;
}
li {
border: 2px solid #000;
border-radius: 20px;
box-shadow: 10px 10px 5px #888888;
margin: 10px;
padding: 2px 5px;
}
</style>
</head>
<body>
<div class="box">
<input type="text" value="随机点名" readonly>
<input type="button" value="开始">
</div>
<ul></ul>
</body>
</html>
<script>
var nameArr = ['曹操','吕布','赵云','关羽','张飞','刘备','马超','魏延','黄忠','诸葛亮','孙权','董卓','袁术','袁绍','张角','庞统','许褚','徐庶','刘璋','陆逊','华佗','荀彧','夏侯惇','庞德','李典','张郃','张辽','李典','典韦','猫叔'];
var text = document.getElementsByTagName("input")[0];
var btn = document.getElementsByTagName("input")[1];
var ulObj = document.getElementsByTagName("ul")[0];
var isStrat = true;
var timer = null;
btn.onclick = function () {
if (nameArr.length > 0) {
if (isStrat) {
isStrat = false;
this.value = "结束";
this.style.border = "2px solid #f00";
this.style.color = "#f00";
timer = setInterval(function () {
var num = parseInt(Math.random() * nameArr.length);
text.value = nameArr[num];
}, 30)
} else {
isStrat = true;
this.value = "开始";
this.style.border = "2px solid #000";
this.style.color = "#000";
clearInterval(timer);
// 作弊 ===============================================================
// 声明flag，检索数组中是否含有"猫_叔"。
var flag = nameArr.includes("猫_叔");
if (flag) {
text.value = "猫_叔";
}
// ====================================================================
var index = nameArr.indexOf(text.value);
nameArr.splice(index, 1);
var liObj = document.createElement("li");
liObj.innerHTML = text.value;
ulObj.appendChild(liObj);
}
} else {
text.value = "没有数据";
}
}
</script>
总结
代码还需优化
