今天是第七天我們可以寫一個javascript自動點名網頁程式管理系統，以下是程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自動點名系統</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
text-align: center;
}
h1 {
color: #333;
}
input, button {
padding: 10px;
font-size: 16px;
margin: 10px;
}
#studentList {
margin-bottom: 20px;
width: 300px;
}
#result {
font-size: 24px;
color: #007BFF;
font-weight: bold;
margin-top: 20px;
}
button {
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
</style>
</head>
<body>
<h1>自動點名系統</h1>
<div>
<label for="studentList">輸入學生姓名 (以逗號分隔):</label><br>
<input type="text" id="studentList" placeholder="例如：John, Alice, Bob">
</div>
<button onclick="startRandom()">開始點名</button>
<div id="result">請輸入名單並開始點名</div>
<script>
let studentArray = [];
let calledStudents = [];
function startRandom() {
const input = document.getElementById('studentList').value;
if (input.trim() === "") {
alert("請輸入學生名單！");
return;
}
// 初次輸入或重新點名時初始化
if (studentArray.length === 0) {
studentArray = input.split(',').map(s => s.trim()).filter(s => s !== "");
calledStudents = []; // 清空已點名的學生
}
if (studentArray.length === 0) {
document.getElementById('result').innerHTML = "所有學生已經點名完成！";
return;
}
// 隨機選擇未被點名的學生
const randomIndex = Math.floor(Math.random() * studentArray.length);
const selectedStudent = studentArray[randomIndex];
// 顯示點名結果
document.getElementById('result').innerHTML = `點名學生：${selectedStudent}`;
// 移除被點名的學生
calledStudents.push(selectedStudent);
studentArray.splice(randomIndex, 1);
}
</script>
</body>
</html>
.html 文件中，然後在瀏覽器中打開它。let studentArray = [];
let calledStudents = [];
這兩個變數在程式的一開始被宣告：
studentArray：這是一個用來存放輸入的學生名單的陣列。calledStudents：這個陣列用來存放已經被點名過的學生，以避免重複點名。startRandom() 函數這是點名的核心函數，當用戶點擊「開始點名」按鈕時，會執行這個函數。
function startRandom() {
這段程式碼表示定義了一個名為 startRandom 的函數，裡面的程式碼會在按下按鈕時執行。
const input = document.getElementById('studentList').value;
這行程式從輸入框中取得用戶輸入的文字。document.getElementById('studentList') 用來取得 HTML 中 id="studentList" 的輸入框，而 .value 會取得該輸入框的內容（即用戶輸入的學生名單）。
if (input.trim() === "") {
alert("請輸入學生名單！");
return;
}
這段程式碼用來檢查用戶是否輸入了任何內容。如果輸入框是空的或者只包含空格，程式會顯示一個提示框 (alert) 提醒用戶輸入名單，並結束函數執行 (return)。
if (studentArray.length === 0) {
studentArray = input.split(',').map(s => s.trim()).filter(s => s !== "");
calledStudents = [];
}
這部分的邏輯是在 studentArray 是空的情況下執行的，也就是第一次點名或重新輸入名單時：
input.split(',')：將用戶輸入的字串按照逗號（,）分割，生成一個陣列，名單中的每個名字成為陣列中的一個元素。.map(s => s.trim())：這個方法遍歷每個名字，並去除掉可能的前後空格（trim()）。.filter(s => s !== "")：去掉空字串（如果用戶可能多輸入了逗號）。calledStudents = []：將已點名的學生陣列清空，因為這是一個新的名單或重新點名。if (studentArray.length === 0) {
document.getElementById('result').innerHTML = "所有學生已經點名完成！";
return;
}
如果 studentArray 已經沒有剩下的學生（表示所有學生都被點過名了），程式會顯示「所有學生已經點名完成」，然後結束函數執行。
const randomIndex = Math.floor(Math.random() * studentArray.length);
const selectedStudent = studentArray[randomIndex];
這段程式碼用來隨機選擇一個學生：
Math.random()：產生一個 0 到 1 之間的隨機數。Math.random() * studentArray.length：將這個隨機數乘以陣列的長度，來取得一個可能的索引值（例如，如果陣列有 10 個學生，這個數就會在 0 到 9 之間）。Math.floor()：向下取整數來得到一個有效的陣列索引。studentArray[randomIndex]：用這個隨機索引來選擇一個學生。document.getElementById('result').innerHTML = `點名學生：${selectedStudent}`;
這行程式碼會將選中的學生名字顯示在 HTML 中的 result 元素裡，這樣用戶就能看到哪個學生被點名了。
calledStudents.push(selectedStudent);
studentArray.splice(randomIndex, 1);
這裡做了兩件事：
calledStudents.push(selectedStudent)：將選中的學生添加到已經點名的學生陣列中。studentArray.splice(randomIndex, 1)：從原始的學生名單中移除這位學生，避免再次點到同一個人。document.getElementById('studentList')這個方法用來從 HTML 中抓取具有指定 id 的元素。在這個範例中，使用它來取得用戶輸入的學生名單。
document.getElementById('result')這個方法用來抓取頁面中用來顯示結果的元素，然後將選中的學生名字顯示出來。
這樣的邏輯可以進一步擴展，比如增加學生狀態追蹤，記錄時間等。
iThome鐵人賽
看影片追技術