效果
年级学生名单.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>
