效果
年级学生名单.csv
1,张*诚
2,朱*皓
3,刘*宇
4,王*欣
5,但*宇
6,张*赫
7,李*昕
8,张*翔
9,曹*悦
10,万*铖
11,万*铖
12,万*铖
13,万*铖
14万*铖
15,万*铖
16,万*铖
17,万*铖
18,万*铖
19,万*铖
20,万*铖
源代码
<!DOCTYPE html>
<html>
<head>
<title>魔法课堂点名器✨</title>
<style>
:root { --主色: #ff9f43; --辅色: #6c5ce7; } /* 橙紫渐变色系:ml-citation{ref="3,4" data="citationList"} */
body {
font-family: 'Comic Sans MS', cursive;
background: linear-gradient(135deg, #fff1e6 0%, #f0e6ff 100%);
margin: 0; padding: 20px;
}
.控制面板 {
display: grid; grid-template-columns: repeat(3,1fr); gap: 15px;
background: rgba(255,255,255,0.9); padding: 20px;
border-radius: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
margin: 20px auto; max-width: 1200px;
}
#学生墙 {
height: 70vh; overflow-y: auto; /* 自适应滚动容器:ml-citation{ref="5,6" data="citationList"} */
background: white; border-radius: 20px;
padding: 15px; margin: 0 auto;
box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; /* 六列网格布局:ml-citation{ref="4" data="citationList"} */
}
.学生卡片 {
padding: 15px; background: #fff; border-radius: 15px;
border: 2px solid var(--主色); text-align: center;
transition: all 0.3s; cursor: pointer;
}
.学生卡片:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.高亮 { animation: glow 1s infinite; background: #fff3e0 !important; }
@keyframes glow { 50% { box-shadow: 0 0 20px #ff9f43; } }
input[type="range"] { accent-color: var(--主色); width: 80%; }
</style>
</head>
<body>
<h1 style="text-align:center;color:var(--主色);font-size:2.5em">
🌟魔法课堂点名器🌟
</h1>
<div class="控制面板">
<div>
<input type="file" id="fileInput" accept=".csv"
style="background:var(--辅色);color:white;padding:10px;border-radius:8px;">
</div>
<div>
<label>🎚️速度调节：</label>
<input type="range" id="speed" min="50" max="500" value="200">
</div>
<div>
<select id="count" style="padding:8px;border-radius:8px;background:var(--辅色);color:white;">
<option>1</option><option>2</option><option>3</option>
</select>
<button onclick="startLottery()"
style="background:var(--主色);padding:10px 20px;border-radius:20px;color:white;border:none;">
🎉开始抽选
</button>
</div>
</div>
<div id="学生墙"></div>
<script>
let students = [];
let isRunning = false;
// CSV文件解析:ml-citation{ref="4,5" data="citationList"}
document.getElementById('fileInput').addEventListener('change', function(e) {
const file = e.target.files[0]; // 关键修改：获取第一个文件
const reader = new FileReader();
reader.onload = function() {
// 增强CSV解析逻辑
students = this.result.split('\n').slice(0,60)
.filter(line => line.trim()) // 过滤空行
.map(line => {
const [, name] = line.split(','); // 提取第二列姓名
return {
name: (name || '未知学生').trim(), // 处理空数据
elem: null
};
});
renderStudents();
};
reader.readAsText(file); // 传递单个文件对象
});
// 学生卡片渲染:ml-citation{ref="4,6" data="citationList"}
function renderStudents() {
const container = document.getElementById('学生墙');
container.innerHTML = '';
students.forEach((student, index) => {
const div = document.createElement('div');
div.className = '学生卡片';
div.innerHTML = `👦${student.name}`;
student.elem = div;
container.appendChild(div);
});
}
// 随机抽选核心算法:ml-citation{ref="1,4" data="citationList"}
let lotteryInterval;
function startLottery() {
if(isRunning) return;
isRunning = true;
const speed = document.getElementById('speed').value;
const count = parseInt(document.getElementById('count').value);
let candidates = [...students];
students.forEach(s => s.elem.classList.remove('高亮'));
lotteryInterval = setInterval(() => {
candidates.forEach(s => s.elem.classList.remove('高亮'));
const selected = [];
while(selected.length < count && candidates.length > 0) {
const index = Math.floor(Math.random() * candidates.length);
selected.push(candidates[index]);
candidates.splice(index,1);
}
selected.forEach(s => s.elem.classList.add('高亮'));
candidates = [...students];
}, speed);
setTimeout(() => {
clearInterval(lotteryInterval);
isRunning = false;
}, 5000); // 5秒后停止:ml-citation{ref="1" data="citationList"}
}
</script>
</body>
</html>
