基于js和html的点名应用
分享一个在课堂或者是公司团建上需要点名的应用程序，开箱即用。
1、双击打开后先选择人员名单（可以随时更改的）
2、下面的滚动速度可以根据需求调整
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>水浒传随机点名器</title>
<style>body {font-family: 'Segoe UI', sans-serif;text-align: center;padding: 20px;background: linear-gradient(135deg, #2C3E50, #4CA1AF);color: #fff;height: 100vh;display: flex;flex-direction: column;justify-content: center;}h1 {font-size: 36px;margin-bottom: 20px;text-shadow: 2px 2px 4px rgba(0,0,0,0.6);}input[type="file"], button {margin: 10px;padding: 10px 20px;font-size: 18px;border: none;border-radius: 8px;cursor: pointer;background: #fff;color: #333;box-shadow: 2px 2px 6px rgba(0,0,0,0.3);transition: 0.2s;}input[type="file"]:hover, button:hover {transform: scale(1.05);}#result {font-size: 48px;font-weight: bold;margin-top: 30px;min-height: 60px;}.nickname {color: gold;text-shadow: 0 0 6px rgba(255,215,0,0.8);margin-right: 10px;}.realname {color: white;text-shadow: 0 0 8px rgba(255,255,255,0.9);}.highlight {animation: flash 0.6s alternate infinite;}@keyframes flash {from { transform: scale(1); }to { transform: scale(1.2); }}.slider-container {margin-top: 15px;font-size: 16px;}
</style>
</head>
<body><h1>🏹 水浒108将随机点名器 🐯</h1><input type="file" id="csvFile" accept=".csv"><button id="toggleBtn" disabled>开始</button><div class="slider-container">滚动速度（毫秒/次）：<span id="speedValue">100</span><input type="range" id="speedSlider" min="20" max="500" value="100"></div><div id="result">请先上传名单</div><script>
let students = [];
let rollingInterval = null;
let isRolling = false;
let speed = 100; // 初始速度// 解析 CSV 文件
document.getElementById('csvFile').addEventListener('change', function(e) {const file = e.target.files[0];if (!file) return;const reader = new FileReader();reader.onload = function(event) {const text = event.target.result;students = parseCSV(text);if (students.length > 0) {document.getElementById('toggleBtn').disabled = false;document.getElementById('result').textContent = `已加载 ${students.length} 人`;} else {document.getElementById('result').textContent = "CSV 文件没有有效数据";}};reader.readAsText(file, 'utf-8');
});// 滚动速度滑块
document.getElementById('speedSlider').addEventListener('input', function() {speed = parseInt(this.value);document.getElementById('speedValue').textContent = speed;if (isRolling) {clearInterval(rollingInterval);startRolling();}
});// 开始/暂停按钮
document.getElementById('toggleBtn').addEventListener('click', function() {if (students.length === 0) return;if (!isRolling) {startRolling();this.textContent = "暂停";} else {stopRolling();this.textContent = "开始";}isRolling = !isRolling;
});// 开始滚动
function startRolling() {rollingInterval = setInterval(() => {const randomIndex = Math.floor(Math.random() * students.length);displayName(students[randomIndex]);}, speed);
}// 停止滚动并高亮显示最终结果
function stopRolling() {clearInterval(rollingInterval);const finalName = document.getElementById('result').textContent;const nameParts = finalName.split(/\s+/);if (nameParts.length === 2) {document.getElementById('result').innerHTML =`<span class="nickname highlight">${nameParts[0]}</span><span class="realname highlight">${nameParts[1]}</span>`;}
}// 解析 CSV
function parseCSV(text) {return text.split('\n').map(line => line.trim()).filter(line => line.length > 0);
}// 显示带颜色的名字
function displayName(fullName) {const parts = fullName.split(/\s+/);if (parts.length === 2) {document.getElementById('result').innerHTML =`<span class="nickname">${parts[0]}</span><span class="realname">${parts[1]}</span>`;} else {document.getElementById('result').textContent = fullName;}
}
</script>
</body>
</html>