一、需求分析
1、我们需要有一个包含学生名字的名单
2、能够随机选择一个名字
3、选择的名字不能重复，需要进行记录
二、设计思路
1、使用数组存储学生名字
<script>
var students = ['小明', '李华', '张三', '王五', '赵六'];
</script>
2、使用Math.random()随机生成一个下标
<script>
var index = Math.floor(Math.random() * students.length);
var selectedStudent = students[index];
</script>
3、使用数组记录已经选择的名字
<script>
var selectedStudents = [];
selectedStudents.push(selectedStudent);
</script>
三、实现代码
<html>
<head>
<title>随机点名器</title>
<meta charset="UTF-8">
</head>
<body>
<h1>随机点名器</h1>
<div>
<p>当前已选名单：</p>
<ul id="selected-list"></ul>
</div>
<button onclick="selectStudent()">开始点名</button>
<script>
var students = ['小明', '李华', '张三', '王五', '赵六'];
var selectedStudents = [];
function selectStudent() {
if(selectedStudents.length === students.length){
alert('全部学生已经点名完成！');
return;
}
var index = Math.floor(Math.random() * students.length);
var selectedStudent = students[index];
if(selectedStudents.indexOf(selectedStudent) !== -1){
selectStudent();
return;
}
selectedStudents.push(selectedStudent);
var selectedList = document.getElementById('selected-list');
var li = document.createElement('li');
li.innerText = selectedStudent;
selectedList.appendChild(li);
}
</script>
</body>
</html>
四、实现效果
打开html文件后，点击“开始点名”按钮，将随机选择一个名字并且将选择的名字添加到已选名单中呈现在页面上，直到全部学生点名完成。
原创文章，作者：UTZKU，如若转载，请注明出处：https://www.506064.com/n/372804.html
微信扫一扫 
支付宝扫一扫 