一、需求分析
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/zh-hant/n/372804.html
微信掃一掃 
支付寶掃一掃 