使用JS实现班级幸运儿程序:页面点击开始按钮,学生姓名随机出现,点击暂停按钮,产生出一位幸运儿,可以多次点击产生多名幸运儿,点击结束按钮,清空所有幸运儿。
时间: 2024-10-13 10:18:44 浏览: 13
在JavaScript中,你可以通过事件监听、数组操作以及随机数生成来实现这个班级幸运儿的程序。这里是一个简单的示例代码:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>班级幸运儿</title>
<style>
.lucky {
display: none;
}
</style>
</head>
<body>
<h1>班级幸运儿</h1>
<button id="start">开始</button>
<ul id="studentsList"></ul>
<button id="pause">暂停</button>
<button id="end">结束</button>
<script>
const students = ['张三', '李四', '王五', '赵六', '孙七']; // 学生列表
let luckyDrawn = []; // 已经产生的幸运儿
document.getElementById('start').addEventListener('click', () => {
startDrawing();
});
document.getElementById('pause').addEventListener('click', () => {
pauseDrawing();
});
document.getElementById('end').addEventListener('click', () => {
clearLucky();
reset();
});
function startDrawing() {
if (luckyDrawn.length === students.length) return; // 如果已全部抽取,不再开始
const randomIndex = Math.floor(Math.random() * students.length);
const student = students[randomIndex];
students.splice(randomIndex, 1); // 从列表移除已选中的学生
displayLucky(student);
luckyDrawn.push(student);
if (students.length > 0) {
setTimeout(startDrawing, 1000); // 每秒抽一次
}
}
function pauseDrawing() {
luckyDrawn.forEach(lucky => {
removeLuckyDisplay(lucky);
});
document.getElementById('start').disabled = false;
}
function clearLucky() {
luckyDrawn = [];
studentsList.innerHTML = '';
}
function reset() {
studentsList.innerHTML = '<li>学生们:</li>';
for (const student of students) {
studentsList.innerHTML += `<li>${student}</li>`;
}
luckyDrawn = [];
document.getElementById('pause').disabled = true;
document.getElementById('start').innerText = '开始';
}
function displayLucky(student) {
const li = document.createElement('li');
li.textContent = `恭喜 ${student} 成为幸运儿!`;
li.classList.add('lucky');
studentsList.appendChild(li);
document.getElementById('pause').disabled = true;
document.getElementById('start').innerText = '继续';
}
function removeLuckyDisplay(student) {
const luckyLi = studentsList.querySelector(`li:contains(${student})`);
if (luckyLi) {
luckyLi.remove();
}
}
</script>
</body>
</html>
```
在这个代码里,我们首先定义了一个学生列表,并添加了开始、暂停和结束按钮的事件处理函数。当用户点击开始,会进入一个循环,在每次循环中随机选择一名学生并显示出来,直到所有学生都被选中;点击暂停则停止抽取并允许再次开始;点击结束将清除所有幸运儿信息并回到初始状态。
阅读全文