体育场预约管理系统Android课程设计：基于Room的时段冲突与事务实现
2026/9/14 12:28:14
简介：这是一份面向网页设计初学者与教学实践者的HTML+JavaScript互动工具模板，专为课堂随机点名场景开发，解决教师手动点名效率低、公平性难保障的问题。资源包共7个文件，含4个HTML页面（含主入口index.html及多版本测试页）、2个编码不同的名单文本（GBK/UTF-8格式）、1个核心JS脚本（shit.js），总大小仅11KB，轻量易部署，无需服务器即可本地运行。已有318人学习下载，体现了其在教学辅助类Web小工具中的实用热度。读者可直接运行体验txt文件导入、行分割解析、随机抽取与实时显示全流程，深入理解FileReader API调用、DOM动态更新及跨编码文本处理等关键前端技能，同时获得多版本HTML结构对比与容错性设计参考，是掌握基础Web交互开发的典型入门范例。
1. 一个能从 TXT 文件读名字、点名不重复、带 UI 反馈的 HTML 随机点名器，不是“写死几个名字”的 demo
你正在准备课堂互动、团建抽签或部门晨会——手头有一份 200 行的student_list.txt，里面是全班学生姓名，每行一个；你不想手动复制粘贴进网页，更不想每次改名字都重写 HTML；你希望点一次就高亮显示、语音播报、自动记录历史，且浏览器刷新后历史不丢。这个标题说的，就是一个真能对接真实 TXT 文档、符合教学/办公场景闭环需求的网页设计落地方案，不是仅用Math.random()打印几个名字的练习作业。它属于html+css+js网页设计的典型综合实践，核心难点不在“随机”，而在安全读取本地文件、解析纯文本结构、状态持久化、UI 响应式反馈这四层叠加。适合刚学完<!doctype html><html lang="zh-cn"><head><meta charset="utf-8">的前端新手，也值得有经验者审视FileReader的错误边界和localStorage的序列化陷阱。
2. 用原生 HTML+CSS+JS 实现 TXT 导入与名字解析：不依赖任何框架，兼容 Chrome/Firefox/Edge 最新版
2.1 为什么必须用<input type="file">而非fetch('./list.txt')？安全沙箱与跨域限制的真实约束
现代浏览器出于安全策略，禁止网页脚本直接读取本地文件系统路径（如C:\data\names.txt）。fetch('./list.txt')看似简洁，实则要求该 TXT 文件已部署在同源 Web 服务器上（例如通过python -m http.server 8000启动本地服务），普通双击打开index.html时会触发 CORS 错误。而<input type="file">是唯一被浏览器明确授权的、允许用户主动选择本地文件并读取内容的机制。它不突破同源策略，因为文件读取动作由用户显式触发（点击上传按钮），属于“用户授予权限”行为。这是网页设计与制作中必须厘清的第一道分水岭：不是技术做不到，而是浏览器安全模型决定了“谁发起、谁负责”。所有绕过此机制的方案（如 Electron、Node.js 后端代理）都已超出纯前端范畴，违背本题“HTML 随机点名器”的定位。
2.2 HTML 结构：声明式语义化标签 + 必需的元信息声明
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TXT导入随机点名器 | 网页设计实战</title> <link rel="stylesheet" href="style.css"> </head> <body> <main class="container"> <h1>📝 TXT 名单导入点名器</h1> <!-- 文件选择区域 --> <section class="upload-section"> <label for="txtFile" class="upload-label">📁 选择 TXT 名单文件（每行一个姓名）</label> <input type="file" id="txtFile" accept=".txt" /> <p class="hint">支持 UTF-8 编码，空行与首尾空格将被自动过滤</p> </section> <!-- 控制按钮区域 --> <section class="control-section"> <button id="startBtn" disabled>▶️ 开始随机点名</button> <button id="resetBtn" disabled>🔄 重置名单</button> <button id="historyBtn">📜 查看历史记录</button> </section> <!-- 显示区域 --> <section class="display-section"> <div id="currentName" class="name-display">等待导入名单...</div> <div id="historyList" class="history-list" style="display:none;"></div> </section> </main> <script src="script.js"></script> </body> </html>提示：
<meta charset="utf-8">和<meta name="viewport">是html5网页设计作业的基础标配，缺失会导致中文乱码或移动端布局错乱；accept=".txt"属性虽不能阻止用户选错文件，但能触发浏览器原生文件类型过滤，提升 UX；disabled属性初始禁用按钮，避免用户在无数据时误操作——这是网页设计美化 skill中“状态可见性”的体现。
2.3 CSS 样式：响应式布局 + 关键状态视觉反馈（含深色模式适配）
/* style.css */ :root { --primary: #4a6fa5; --success: #4caf50; --warning: #ff9800; --bg-light: #f8f9fa; --text-dark: #333; } @media (prefers-color-scheme: dark) { :root { --bg-light: #1e1e1e; --text-dark: #e0e0e0; } } body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; background-color: var(--bg-light); color: var(--text-dark); line-height: 1.6; } .container { max-width: 800px; margin: 2rem auto; padding: 0 1.5rem; } .upload-section, .control-section, .display-section { margin-bottom: 1.5rem; padding: 1rem; border-radius: 8px; background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .upload-label { display: block; margin-bottom: 0.5rem; font-weight: 600; } #txtFile { width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; } .name-display { font-size: 3.5rem; font-weight: bold; text-align: center; min-height: 120px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); color: white; border-radius: 12px; margin: 1rem 0; transition: all 0.3s ease; } .name-display.highlight { transform: scale(1.05); box-shadow: 0 0 20px rgba(106, 17, 203, 0.5); } .history-list { max-height: 300px; overflow-y: auto; padding: 0.5rem; background: #f0f4f8; border-radius: 4px; } .history-list li { padding: 0.4rem 0; border-bottom: 1px dashed #ccc; } /* 按钮悬停与激活态 */ button { padding: 0.75rem 1.5rem; margin: 0.25rem; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; transition: all 0.2s; } button:disabled { opacity: 0.6; cursor: not-allowed; } #startBtn { background-color: var(--primary); color: white; } #startBtn:hover:not(:disabled) { background-color: #3a5a8c; transform: translateY(-2px); } #resetBtn { background-color: #f44336; color: white; } #historyBtn { background-color: #2196f3; color: white; }注意：
@media (prefers-color-scheme: dark)是html css js网页设计中渐进增强的范例，无需额外 JS 切换；.name-display.highlight的transform: scale()和box-shadow组合，比单纯改变背景色更能强化“当前被点中”的视觉权重；transition: all 0.3s ease让动画平滑，避免生硬闪烁——这些细节决定用户是否觉得“这网页很专业”。
3. JavaScript 逻辑实现：文件读取、名字清洗、随机算法与 localStorage 持久化
3.1 文件读取与 UTF-8 解析：处理 BOM 头、空行、多余空格的健壮方案
// script.js let nameList = []; let historyLog = JSON.parse(localStorage.getItem('pointHistory') || '[]'); document.getElementById('txtFile').addEventListener('change', function(e) { const file = e.target.files[0]; if (!file) return; // 检查文件类型 if (!file.name.toLowerCase().endsWith('.txt')) { alert('请上传 .txt 格式文件'); return; } const reader = new FileReader(); reader.onload = function(event) { const rawText = event.target.result; // 移除 UTF-8 BOM（如果存在） const textWithoutBOM = rawText.replace(/^\uFEFF/, ''); // 按行分割，过滤空行和纯空格行，trim 每行首尾空格 nameList = textWithoutBOM.split('\n') .map(line => line.trim()) .filter(line => line.length > 0); if (nameList.length === 0) { alert('TXT 文件中未找到有效姓名，请检查格式'); document.getElementById('startBtn').disabled = true; document.getElementById('resetBtn').disabled = true; return; } // 启用按钮 document.getElementById('startBtn').disabled = false; document.getElementById('resetBtn').disabled = false; document.getElementById('currentName').textContent = `✅ 已加载 ${nameList.length} 个名字`; document.getElementById('currentName').className = 'name-display'; }; reader.onerror = function() { alert('读取文件失败，请检查文件是否损坏或权限问题'); }; reader.readAsText(file, 'UTF-8'); // 显式指定编码，避免乱码 });参数说明：
reader.readAsText(file, 'UTF-8')中'UTF-8'是关键参数，若省略，某些系统（如 Windows 记事本保存的 ANSI 文件）可能被误判为 ISO-8859-1，导致中文乱码；rawText.replace(/^\uFEFF/, '')清除 UTF-8 BOM（字节序标记），否则第一行开头可能出现不可见字符；.map(line => line.trim()).filter(line => line.length > 0)是清洗标准流程，比正则/\s+/g更直观可靠。
3.2 随机点名核心算法：Fisher-Yates 洗牌 + 历史记录防重复
document.getElementById('startBtn').addEventListener('click', function() { if (nameList.length === 0) return; // 若历史记录为空或已用完所有名字，则重置历史 if (historyLog.length === 0 || historyLog.length >= nameList.length) { historyLog = []; localStorage.setItem('pointHistory', JSON.stringify(historyLog)); } // 获取剩余未点过的名字 const remainingNames = nameList.filter(name => !historyLog.includes(name)); if (remainingNames.length === 0) { document.getElementById('currentName').textContent = '🎉 全部名字已点过一轮！'; document.getElementById('currentName').className = 'name-display'; return; } // Fisher-Yates 洗牌算法（原地打乱） const shuffled = [...remainingNames]; for (let i = shuffled.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; } const pickedName = shuffled[0]; historyLog.push(pickedName); localStorage.setItem('pointHistory', JSON.stringify(historyLog)); // UI 反馈 const displayEl = document.getElementById('currentName'); displayEl.textContent = pickedName; displayEl.className = 'name-display highlight'; // 可选：语音播报（需用户手势触发，Chrome 限制） if ('speechSynthesis' in window) { const utterance = new SpeechSynthesisUtterance(pickedName); utterance.lang = 'zh-CN'; speechSynthesis.speak(utterance); } });为什么不用
Math.random()直接索引？简单nameList[Math.floor(Math.random() * nameList.length)]无法保证“不重复”，需额外维护已用集合。而 Fisher-Yates 生成真随机排列，取第一个即保证全局唯一性，时间复杂度 O(n)，对百人名单毫秒级完成；localStorage.setItem必须传入字符串，故JSON.stringify()不可省略，否则存入[object Object]；语音播报speechSynthesis是html邮件外较少提及但实用的 Web API，但首次调用需用户交互（如点击按钮）才能启用，此处已满足条件。
3.3 历史记录管理：分页展示、清除逻辑与 localStorage 容量预警
document.getElementById('historyBtn').addEventListener('click', function() { const historyListEl = document.getElementById('historyList'); const historyBtn = document.getElementById('historyBtn'); if (historyListEl.style.display === 'none') { // 构建历史列表 HTML（倒序显示，最新在前） let html = '<h3>📋 近期点名记录（共 ' + historyLog.length + ' 条）</h3><ul>'; const recentHistory = [...historyLog].reverse().slice(0, 50); // 限制显示50条 recentHistory.forEach((name, index) => { html += `<li><strong>${index + 1}.</strong> ${name} <small>(${new Date().toLocaleTimeString()})</small></li>`; }); html += '</ul>'; historyListEl.innerHTML = html; historyListEl.style.display = 'block'; historyBtn.textContent = '❌ 隐藏历史记录'; } else { historyListEl.style.display = 'none'; historyBtn.textContent = '📜 查看历史记录'; } }); document.getElementById('resetBtn').addEventListener('click', function() { if (confirm('确定要清空当前名单和历史记录吗？此操作不可撤销！')) { nameList = []; historyLog = []; localStorage.removeItem('pointHistory'); document.getElementById('currentName').textContent = '等待导入名单...'; document.getElementById('currentName').className = 'name-display'; document.getElementById('startBtn').disabled = true; document.getElementById('resetBtn').disabled = true; document.getElementById('historyList').style.display = 'none'; document.getElementById('historyBtn').textContent = '📜 查看历史记录'; } }); // 监控 localStorage 使用量（可选增强） function checkStorageUsage() { const used = JSON.stringify(historyLog).length; const limit = 5 * 1024 * 1024; // 5MB 保守阈值 if (used > limit * 0.8) { console.warn(`LocalStorage 使用量已达 ${Math.round((used/limit)*100)}%，建议清理历史`); } } checkStorageUsage();注意：
localStorage单域名容量通常为 5–10MB，但JSON.stringify(historyLog)会随记录增长线性膨胀，checkStorageUsage()提供早期预警；confirm()对话框是网页设计期末作业中必须包含的用户确认环节，避免误操作；历史列表slice(0, 50)限制渲染数量，防止 DOM 过大卡顿——这是web网页设计中性能意识的体现。
4. 调试与上线前必验的 5 个真实场景：覆盖常见 TXT 格式与浏览器差异
4.1 TXT 文件编码与换行符兼容性测试表
| 测试文件特征 | Chrome 125 | Firefox 126 | Edge 125 | 是否通过 | 修复动作 |
|---|---|---|---|---|---|
| UTF-8 无 BOM，LF 换行 | ✅ | ✅ | ✅ | 是 | — |
| UTF-8 with BOM，CRLF | ✅ | ✅ | ✅ | 是 | replace(/^\uFEFF/, '')已覆盖 |
| GBK 编码（Windows 记事本） | ❌ 乱码 | ❌ 乱码 | ❌ 乱码 | 否 | 提示用户用 VS Code 保存为 UTF-8 |
| 空行夹在名字中间 | ✅ 过滤 | ✅ 过滤 | ✅ 过滤 | 是 | .filter(line => line.length > 0)生效 |
| 行尾空格（如“张三 ”） | ✅ 清除 | ✅ 清除 | ✅ 清除 | 是 | .trim()保障 |
验证方法：用 VS Code 新建文件，选择“文件 → 另存为 → 编码选择 UTF-8 / GBK / UTF-8 with BOM”，输入测试数据，用不同浏览器打开
index.html上传测试。关键结论：前端无法自动识别 GBK，必须依赖用户保存为 UTF-8——这是网页设计与制作中需向使用者明确告知的约束。
4.2 点名过程中的 UI 状态流转与边界条件处理
// 在 startBtn click 事件中补充以下状态校验 if (nameList.length === 0) { alert('请先上传 TXT 名单文件'); return; } // 添加防抖：避免用户连续点击导致多次点名 let isProcessing = false; document.getElementById('startBtn').addEventListener('click', function() { if (isProcessing) return; isProcessing = true; // ... 主逻辑 ... // 任务完成后重置标志 setTimeout(() => { isProcessing = false; }, 1000); });为什么需要防抖？用户看到按钮无即时反馈，可能连续点击 2–3 次，导致同一名字被重复加入
historyLog并触发多次语音。setTimeout延迟重置标志，确保 UI 动画（.highlight类）和语音播报完成后再解锁按钮——这是html网页制作中易被忽略但影响体验的关键细节。
4.3 本地直接双击运行 vs 本地服务器运行的差异验证
| 运行方式 | fetch('./list.txt') | <input type="file"> | 推荐方案 | 原因说明 |
|---|---|---|---|---|
双击index.html | ❌ CORS 错误 | ✅ 正常工作 | ✅ | 符合“零配置”需求，用户无需装 Python/Node |
python -m http.server | ✅ 可用 | ✅ 正常工作 | ⚠️ | 需用户懂命令行，增加使用门槛 |
| GitHub Pages 部署 | ❌ 静态托管无后端 | ✅ 正常工作 | ✅ | 用户仍可上传本地 TXT，完全可行 |
结论：本方案天然适配
GitHub Pages、Vercel等静态托管平台，无需任何后端，真正实现html+css+js网页设计的极简交付。用户只需访问 URL，点击上传即可使用——这是网页设计期末作业交付时最被教师认可的形态。
5. 进阶技巧：添加导出功能、支持多列 TXT 与键盘快捷键控制
5.1 一键导出当前历史记录为 TXT 文件（纯前端实现）
function downloadHistoryAsTxt() { if (historyLog.length === 0) return; const content = historyLog.join('\n'); const blob = new Blob([content], { type: 'text/plain;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `point_history_${new Date().toISOString().slice(0,10)}.txt`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } // 绑定到 historyBtn 的长按事件（或新增导出按钮） document.getElementById('historyBtn').addEventListener('contextmenu', function(e) { e.preventDefault(); downloadHistoryAsTxt(); alert('历史记录已导出为 TXT 文件'); });逻辑说明：
Blob对象封装文本内容，URL.createObjectURL()生成临时 URL，<a>标签触发下载。a.download属性指定文件名，new Date().toISOString().slice(0,10)生成YYYY-MM-DD格式日期，避免重名。右键菜单触发（contextmenu）是网页设计美化 skill中不占 UI 空间的隐藏功能设计。
5.2 支持逗号分隔的单行 TXT（如“张三,李四,王五”）的解析扩展
// 在 FileReader onload 回调中，于 nameList 赋值前插入： const firstLine = textWithoutBOM.split('\n')[0]; if (firstLine.includes(',') && !firstLine.includes('\t') && firstLine.length < 200) { // 启用逗号分隔模式：将首行按逗号拆分，忽略后续行 nameList = firstLine.split(',') .map(item => item.trim()) .filter(item => item.length > 0); alert('检测到逗号分隔格式，已按首行解析'); } else { // 原有按行解析逻辑 nameList = textWithoutBOM.split('\n') .map(line => line.trim()) .filter(line => line.length > 0); }参数说明：此扩展通过启发式判断（首行含逗号、无制表符、长度合理）自动切换解析模式，兼顾
shp转txt等工具导出的 CSV-like 格式；alert()提供用户反馈，避免静默切换导致困惑——这是html网页制作中“用户可知性”原则的实践。
5.3 键盘快捷键支持：空格键开始点名，ESC 键重置
document.addEventListener('keydown', function(e) { if (e.key === ' ' && !e.target.matches('input, textarea, [contenteditable]')) { e.preventDefault(); // 阻止页面滚动 document.getElementById('startBtn').click(); } if (e.key === 'Escape') { document.getElementById('resetBtn').click(); } });为什么限定
!e.target.matches(...)？防止用户在输入框内按空格时触发点名，matches()方法精准排除表单元素；e.preventDefault()是关键，否则空格键默认触发页面向下滚动——这是html5网页设计作业中提升专业感的微交互细节。
本文还有配套的精品资源，点击获取