<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>班级随机点名系统</title>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
color: #333;
text-align: center;
margin-bottom: 20px;
}
.control-panel {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 20px;
width: 90%;
max-width: 800px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.control-group {
margin: 10px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
input, select, button {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s;
font-weight: bold;
margin: 5px;
}
button:hover {
background-color: #45a049;
}
button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
#stopBtn {
background-color: #f44336;
}
#stopBtn:hover {
background-color: #d32f2f;
}
.name-grid {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 10px;
width: 90%;
max-width: 1000px;
margin: 20px auto;
}
.name-box {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.name-box:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.name-box.highlight {
background-color: #4CAF50;
color: white;
font-weight: bold;
animation: pulse 1s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.result-panel {
margin-top: 20px;
padding: 15px;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
width: 90%;
max-width: 800px;
text-align: center;
}
.result-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
.result-names {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.result-name {
background-color: #4CAF50;
color: white;
padding: 8px 15px;
border-radius: 20px;
font-weight: bold;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 1000;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: white;
padding: 20px;
border-radius: 10px;
width: 80%;
max-width: 500px;
}
.modal-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 15px;
color: #333;
}
.modal-input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}
.modal-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
}
</style>
</head>
<body>
<h1>班级随机点名系统</h1>
<div class="control-panel">
<div class="control-group">
<label for="countInput">随机选择人数</label>
<select id="countInput">
<option value="1">1人</option>
<option value="2">2人</option>
<option value="3">3人</option>
<option value="4">4人</option>
<option value="5">5人</option>
</select>
</div>
<div class="control-group">
<button id="startBtn">开始点名</button>
<button id="stopBtn" disabled>停止</button>
</div>
<div class="control-group">
<button id="addBtn">添加新成员</button>
</div>
</div>
<div class="name-grid" id="nameGrid">
</div>
<div class="result-panel" id="resultPanel" style="display: none;">
<div class="result-title">本次被点名的同学是：</div>
<div class="result-names" id="resultNames"></div>
</div>
<div class="modal" id="addModal">
<div class="modal-content">
<div class="modal-title">添加新成员</div>
<input type="text" id="newNameInput" class="modal-input" placeholder="请输入姓名">
<div class="modal-buttons">
<button id="cancelAddBtn">取消</button>
<button id="confirmAddBtn">确认添加</button>
</div>
</div>
</div>
<script>
// 初始学生名单 (50人)
let students = [
"张三", "李四", "王五", "赵六", "钱七",
"孙八", "周九", "吴十", "郑十一", "王十二",
"刘十三", "陈十四", "杨十五", "黄十六", "赵十七",
"吴十八", "周十九", "徐二十", "孙二十一", "朱二十二",
"胡二十三", "林二十四", "高二十五", "何二十六", "郭二十七",
"马二十八", "罗二十九", "梁三十", "宋三十一", "谢三十二",
"唐三十三", "韩三十四", "曹三十五", "许三十六", "邓三十七",
"萧三十八", "冯三十九", "曾四十", "程四十一", "蔡四十二",
"潘四十三", "袁四十四", "于四十五", "董四十六", "余四十七",
"叶四十八", "蒋四十九", "杜五十", "苏五十一", "魏五十二"
];
// 获取DOM元素
const nameGrid = document.getElementById('nameGrid');
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const countInput = document.getElementById('countInput');
const resultPanel = document.getElementById('resultPanel');
const resultNames = document.getElementById('resultNames');
const addBtn = document.getElementById('addBtn');
const addModal = document.getElementById('addModal');
const newNameInput = document.getElementById('newNameInput');
const cancelAddBtn = document.getElementById('cancelAddBtn');
const confirmAddBtn = document.getElementById('confirmAddBtn');
// 初始化变量
let isRunning = false;
let intervalId = null;
let selectedCount = 0;
let selectedNames = [];
let nameElements = [];
// 初始化名字网格
function initNameGrid() {
nameGrid.innerHTML = '';
nameElements = [];
students.forEach((student, index) => {
const nameBox = document.createElement('div');
nameBox.className = 'name-box';
nameBox.textContent = student;
nameBox.dataset.index = index;
nameGrid.appendChild(nameBox);
nameElements.push(nameBox);
});
}
// 开始随机点名
function startRandomSelection() {
const count = parseInt(countInput.value);
selectedCount = count;
selectedNames = [];
// 重置所有名字方块
nameElements.forEach(box => {
box.classList.remove('highlight');
});
// 隐藏结果面板
resultPanel.style.display = 'none';
// 禁用开始按钮和下拉框，启用停止按钮
startBtn.disabled = true;
countInput.disabled = true;
stopBtn.disabled = false;
isRunning = true;
// 开始随机高亮名字
intervalId = setInterval(() => {
// 随机选择一个名字高亮
const randomIndex = Math.floor(Math.random() * students.length);
// 移除之前的高亮
nameElements.forEach(box => {
box.classList.remove('highlight');
});
// 添加新的高亮
nameElements[randomIndex].classList.add('highlight');
}, 100);
}
// 停止随机点名
function stopRandomSelection() {
clearInterval(intervalId);
// 获取最终选中的名字
const highlightedBoxes = document.querySelectorAll('.name-box.highlight');
selectedNames = Array.from(highlightedBoxes).map(box => box.textContent);
// 如果需要选择多个名字，使用Fisher-Yates算法
if (selectedCount > 1) {
// 重置高亮
nameElements.forEach(box => {
box.classList.remove('highlight');
});
// 创建一个学生索引数组
let indices = Array.from({length: students.length}, (_, i) => i);
// Fisher-Yates洗牌算法
for (let i = indices.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[indices[i], indices[j]] = [indices[j], indices[i]];
}
// 取前selectedCount个作为结果
selectedNames = indices.slice(0, selectedCount).map(i => students[i]);
// 高亮选中的名字
selectedNames.forEach(name => {
const index = students.indexOf(name);
if (index !== -1) {
nameElements[index].classList.add('highlight');
}
});
}
// 显示结果
displayResults();
// 启用开始按钮和下拉框，禁用停止按钮
startBtn.disabled = false;
countInput.disabled = false;
stopBtn.disabled = true;
isRunning = false;
}
// 显示结果
function displayResults() {
resultNames.innerHTML = '';
selectedNames.forEach(name => {
const nameElement = document.createElement('div');
nameElement.className = 'result-name';
nameElement.textContent = name;
resultNames.appendChild(nameElement);
});
resultPanel.style.display = 'block';
}
// 添加新成员
function addNewMember() {
addModal.style.display = 'flex';
newNameInput.focus();
}
// 确认添加新成员
function confirmAddMember() {
const newName = newNameInput.value.trim();
if (newName) {
students.push(newName);
initNameGrid();
newNameInput.value = '';
addModal.style.display = 'none';
}
}
// 事件监听
startBtn.addEventListener('click', startRandomSelection);
stopBtn.addEventListener('click', stopRandomSelection);
addBtn.addEventListener('click', addNewMember);
cancelAddBtn.addEventListener('click', () => {
addModal.style.display = 'none';
newNameInput.value = '';
});
confirmAddBtn.addEventListener('click', confirmAddMember);
// 初始化
initNameGrid();
</script>
</body>
</html>
[复制链接]
发表于 2025-3-20 10:16
|
发表于 2025-3-20 10:37
