简介面向网页设计课程初学者与需要课堂互动的教师这份zip压缩包提供了一款基于HTMLJavaScript实现的随机点名器核心功能是通过文件选择框导入txt名单借助FileReader读取内容并按换行切分为数组再由Math.random随机抽取姓名并即时展示解决了手动滚动名单低效、难以保证公平的问题。压缩包内共7个文件包含4个HTML页面、1个JS脚本和2个txt名单示例整体仅11KB其中HTML页面分别呈现基础版与“随机不重复点名”增强版txt文件区分GBK与UTF-8编码便于适配不同环境。资源已吸引318人学习下载适合作为课堂演示或练手素材。使用者可直接打开页面体验完整点名流程也可对照源码理解表单控件、事件监听、文件读取、数组操作与DOM更新等Web基础技能并基于现有代码快速扩展为分组点名、名单管理等功能。1. 随机点名器一份HTMLtxt压缩包解决课堂点名的随机与公平问题随机点名器这种工具单看演示觉得太简单一个按钮跳出一个名字几秒钟完事。可真正拉到公开课现场问题一个接一个——名单敲进表格要半天、投影一黑不知道刚才点到谁、抽过的人下一轮又中最后只能用“没举手的同学自己选一个”糊弄过去。这份压缩包拆开看就是几个 HTML 文件、一个 JS 脚本外加两份 txt 名单名单按行放姓名页面读 txt 导入并随机抽取。不需要装任何软件也不用后端服务浏览器打开就能跑。它适合老师课堂提问、培训签到互动、社团抽人干活这类小场景不解决“名单录入”的问题但把“随机且不重复点名”这件事做完整了。2. 拆解压缩包四个HTML与两份txt名单各自该用哪个2.1 文件清单别看名字乱真正入口就一个拿到压缩包第一件事不是急着双击某个 HTML而是把文件全列出来。这个 zip 里有多个 HTML、一个独立 JS 脚本和两份 txt 名单命名并不规范属于典型的网页设计课程作业或早期开发留下的现场。从文件命名能大概判断角色文件角色使用建议随机点名器.html基础版支持导入 txt 后随机抽一个名字单次点名场景打开这个随机不重复点名器.html增强版抽过的名字在本轮内不再出现多轮课堂提问推荐用这个index.html入口页通常与其他版本内容重复放到服务器目录当首页时用temp.html调试/临时版本可能缺少样式或事件绑定不建议使用独立 JS 脚本公共逻辑负责文件读取、随机算法和界面刷新所有页面共用名单-utf8.txtUTF-8 编码的示例名单优先选这个名单-gbk.txtGBK 编码示例兼容 Windows 记事本默认保存格式手头名单是 GBK 时才选这个为什么同一个功能要做这么多版本多半是迭代过程中没清理旧副本。如果你的目标是课堂直接用别去纠结 temp.html 和 index.html 哪个更好从“随机不重复点名器.html”开始跑它兼容了基础功能又多了不重复逻辑。压缩包里那个独立 JS 文件名字不太讲究建议复制出来重命名为namer.js再引用省得同事或学生看到后尴尬。2.2 两份txt名单不是冗余是编码兼容很多第一次用的人会问为什么放两份名单内容不是一样吗这是编码问题。Windows 记事本默认保存为 ANSI也就是 GBK而 HTML 页面和 FileReader 读取文本时默认按 UTF-8 解码。如果拿一个 GBK 文件喂给按 UTF-8 解析的页面中文字节被错误映射页面就会显示一堆“锟斤拷”。压缩包放两份名单是为了让你按手头 txt 的实际编码选。判断方法很简单用记事本打开名单点“文件—另存为”对话框底部能看到“编码”下拉框如果显示 ANSI就是 GBK 编码如果显示 UTF-8就是 UTF-8 编码。更快的办法是直接用编辑器如 VS Code 打开右下角会显示编码类型。我的习惯是先把所有名单统一转成 UTF-8 再喂给页面因为 HTML 页面用的就是 UTF-8少一个坑。2.3 名单格式一行一个名字是硬约束点名器对名单格式要求极其简单每行一个名字不要有多余空格、空行更不要用逗号或顿号分隔。原因是 JavaScript 里最常见的做法是用split(\n)按换行符切分。如果名单写成“张三 2024001”整串会被当成一个名字抽出来。正确格式是这样张三 李四 王五错误格式是这样张三 2024001 李四 2024002如果一定要带学号建议写成“张三-2024001”抽中后页面显示整个字符串老师也能认出来。还有一点容易被忽略最后一行后如果多了一个空行切出来会有一个空字符串点名时偶尔会出现名字区域空白。这个在避坑章节细说但写名单时养成每行占一格、文件末尾不留空行的习惯能省很多事。2.4 为什么用txt而不是Excel这个压缩包刻意选 txt 而不是 Excel 或数据库理由是低门槛。HTML 页面在浏览器里没法直接读取用户本机 Excel 文件即使能读也需要解析 xlsx 里复杂的 XML 结构光是用 SheetJS 之类库就要引入一个几十 KB 的脚本。而浏览器环境天然支持 FileReader 读取文本文件txt 的解析就是一个split的事。对点名这种简单需求txt 是成本最低的载体。更重要的是txt 可以被记事本、VS Code、WPS 随便改老师自己动手修改名单不需要安装任何工具。3. 跑通点名流程网页设计作品到手三分钟验证3.1 本地打开与选择文件的正确姿势操作步骤只有四步解压整个压缩包把文件夹放到桌面不要只拖出其中一个 HTML用 Chrome 或 Edge 双击打开“随机不重复点名器.html”点击页面上的文件选择按钮选中“名单-utf8.txt”再点“开始点名”看结果。这里注意的是不要在微信、QQ 的预览窗口里打开这类内置浏览器对本地文件读取限制很严格FileReader 可能直接被禁用。也不要右键选 IE 打开IE 不支持FileReader和许多新语法页面会白屏或按钮没反应。如果选完文件后点击按钮没有任何变化先按 F12 打开开发者工具看 Console 面板有没有红色报错没有报错的话看是不是页面有两个按钮你点错了位置。这是网页设计类工具最常见的两个现场。3.2 快速验证“随机”而不是“固定顺序”一个简短的验证方法新建一个只有“甲、乙”两个名字的 txt导入后连点十次开始点名理论上两个名字都应该出现。如果十次全是同一个那就不是随机而是脚本逻辑有问题。比如某些实现只在页面加载时抽取一次按钮点击后没有重新触发随机函数或者按钮绑定了事件但每次用的是同一个全局变量。这时可以在控制台手动跑一段纯随机函数确认浏览器行为本身没问题let count { 甲: 0, 乙: 0 }; for (let i 0; i 100; i) { const r Math.random(); if (r 0.5) { count[甲]; } else { count[乙]; } } console.log(count);这段代码的作用是验证Math.random()在你当前浏览器里返回的确实是 0 到 1 之间分布还算均匀的小数。正常结果应该是两个计数都在 50 左右。如果这一关过了说明随机源没问题问题出在点名器页面的抽取逻辑或事件绑定时机上。3.3 按钮没反应先看这三处第一处是否真的选择了文件。有的版本在未选择文件时点击按钮没有提示需要用fileInput.files[0]判断一下没文件就弹 alert 或直接 return。第二处名单是否包含全角空格或中文标点。比如“张三 ”中间是全角空格trim()默认只处理半角空格trim()函数处理不了全角空格名字看起来正常但实际字符串里带着看不见的东西。第三处是否误开了 temp.html。temp 这类调试文件经常在开发过程被改了半截事件没绑定全用主版本文件最稳。照着这三处查完绝大多数“点了没反应”都能解决。3.4 用本地HTTP服务器打开更稳虽然直接在浏览器双击 HTML 也能读 txt但某些浏览器版本对file://协议下的本地文件读取会有限制尤其当你把名单文件放在子目录、或者用相对路径引用资源时可能出现跨域问题。一个稳妥做法是在项目目录下起一个本地静态服务器。如果你装了 Python在文件夹里开命令行跑python -m http.server 8080然后用浏览器访问http://localhost:8080/随机不重复点名器.html。这样页面通过 HTTP 协议加载它的文件读取行为更接近部署到公网后的效果而且同一个局域网里的其他设备也能通过你的局域网 IP 访问课堂投屏时可以直接让学生的手机或教室电脑打开。参数 8080 可以改成任意未占用端口如果电脑上装了 VS Code装上 Live Server 插件右键 HTML 文件选 “Open with Live Server” 也能达到同样效果。4. 自写随机点名器核心逻辑FileReader读取txt与不重复抽选4.1 FileReader读取txt并切割成名字数组如果不想背成品代码至少要能写出点名器的核心骨架。下面这个是最简版本HTML 结构和事件绑定都写在同一个文件里方便直接打开。!DOCTYPE html html langzh-CN head meta charsetUTF-8 title随机点名器/title /head body h1随机点名器/h1 input typefile idnameFile accept.txt button idstartButton开始点名/button p idselectedName/p script document.getElementById(startButton).addEventListener(click, function() { const fileInput document.getElementById(nameFile); const file fileInput.files[0]; if (!file) { alert(请先选择名单 txt 文件); return; } const reader new FileReader(); reader.onload function(event) { const names event.target.result .split(/\r?\n/) // 兼容 Windows 和 Unix 换行 .map(s s.trim()) // 去掉每行前后空格 .filter(Boolean); // 过滤空串 const index Math.floor(Math.random() * names.length); document.getElementById(selectedName).textContent 被选中的人 names[index]; }; reader.readAsText(file, UTF-8); }); /script /body /html逻辑说明readAsText的第二个参数显式声明用 UTF-8 解码避免有些浏览器默认编码不一致。split(/\r?\n/)同时兼容 Windows 的\r\n和 Linux 的\n如果只按\n切分Windows 文件每行末尾的\r会残留下来。trim()去掉每行两边的空白filter(Boolean)去掉空字符串。最后Math.floor(Math.random() * names.length)生成一个 0 到names.length - 1的整数下标保证不会越界。4.2 不重复点名用索引集合而不是名字去重点名需求常常是“每轮每个人只点一次”。很多初学者用splice(index, 1)从原数组删除名字这样做会破坏原始名单重置时还得备份一份。我一般用 Set 存一个“已经抽过的人的下标”抽中后把下标加进去下次抽的时候判断下标是否已经存在。const usedIndexes new Set(); function pickOne(names) { if (usedIndexes.size names.length) { return null; // 全部抽过 } let index Math.floor(Math.random() * names.length); let guard 0; while (usedIndexes.has(index) guard names.length * 2) { index Math.floor(Math.random() * names.length); guard; } // 兜底随机反复撞车时顺序找第一个没抽过的 if (usedIndexes.has(index)) { for (let i 0; i names.length; i) { if (!usedIndexes.has(i)) { index i; break; } } } usedIndexes.add(index); return names[index]; }参数说明usedIndexes存的是数组下标而不是名字本身这样名单里有两个“王芳”也能正确区分。guard是防死循环的计数器当名单只剩最后一个未抽时随机撞车概率是 1/n名字越多越容易连续撞车所以给它一个重试上限。上限设成names.length * 2理论上足够万一还是撞上就顺序查找兜底。函数返回null表示本轮已全部抽完调用方可以弹出提示并提供“重置”按钮重置就是usedIndexes.clear()。4.3 给页面加“本轮已抽记录”老师点名不只要看当前抽到谁还要回顾谁已经回答过。在 HTML 里加一个容器div idhistory/div每次抽取成功后把名字追加进去const history document.getElementById(history); const span document.createElement(span); span.textContent names[index] ; history.appendChild(span);这样比不断用innerHTML 更干净。点名这种低频操作对性能没要求但养成appendChild的习惯后续做消息列表或日志时不容易踩到处都是事件的坑。如果想让历史记录不无限增长可以在追加前检查子节点数量超过 20 个就把第一个移除while (history.children.length 20) { history.removeChild(history.firstChild); }这个限制能防止课堂时间过长时页面底部被名字刷屏。4.4 兼容GBK名单的进阶读取前文说过readAsText默认按 UTF-8 解码遇到 GBK 名单容易乱码。如果你不想先转码可以直接读原始字节再用TextDecoder解码async function readNamesFromFile(file) { const buffer await file.arrayBuffer(); const text new TextDecoder(gbk).decode(buffer); return text.split(/\r?\n/).map(s s.trim()).filter(Boolean); }说明TextDecoder(gbk)在 Chrome、Edge、Firefox 都能用Safari 的旧版本支持不够好。这段代码要放在async函数里因为arrayBuffer()返回的是 Promise。如果页面只服务自己教室的浏览器用这个方案最省事如果要给别人分发还是统一转成 UTF-8 名单更靠谱。4.5 重置与导出点名结果重置不重复点名器的逻辑很简单清空usedIndexes同时清空页面上的历史记录容器。但很多成品版本漏了“重置”按钮刷新页面后数据虽然清了可如果名单文件没换本地存储里的旧索引可能会残留。因此我每次写支持不重复的点名器都会在页面放两个按钮“开始点名”和“重置本轮”。重置按钮的实现是document.getElementById(resetButton).addEventListener(click, function() { usedIndexes.clear(); document.getElementById(history).innerHTML ; localStorage.removeItem(usedIndexes); });导出点名结果的代码可以放在下一节讲但记住一个原则重置操作要同时清内存、清页面、清本地存储三处都得处理只清一处一定会留下“幽灵记录”。5. 避坑乱码、重复点名、刷新丢状态五条踩坑记录5.1 中文乱码GBK名单被当UTF-8读现象导入“名单-gbk.txt”后页面上的名字全是“”或“锟斤拷”一类乱码点名按钮能点抽出来的名字没法认。原因FileReader 的readAsText默认按 UTF-8 解码GBK 是多字节编码字节流被错误映射成字符。解决优先选“名单-utf8.txt”。如果手头只有 GBK 文件用记事本打开后“另存为”编码选 UTF-8。不想转码的话用 4.4 里的TextDecoder(gbk)方案。从那次以后我养成了习惯拿到任何名单先看编码再看名字有没有空行比踩完坑再修快得多。5.2 抽出的名字带空格或偶尔抽到空行现象界面显示的名字前面有一小块空白或者偶尔整个名字区域是空白看起来像抽了个“隐形人”。原因txt 每行末尾可能有不可见空格或者名单中间有空行。很多版本的代码只用split(\n)没有trim()和filter(Boolean)空行被切成了一个空字符串。解决切割数组后加.map(s s.trim()).filter(Boolean)。如果不想改代码编辑名单时在文本编辑器里打开“显示空格”把所有行尾空格删干净再移除空行。用 VS Code 的话快捷键CtrlH把正则^\s*$替换为空字符串能一键清空所有空行。5.3 不重复点名器连续抽中同一个名字现象用了“随机不重复点名器.html”第二次点名居然还是抽到了同一个人。原因页面可能按“名字内容”去重而不是按“位置索引”去重。如果名单里有同名的人抽到其中一个后另一个也被封杀或者抽中后没有把当前索引加入集合导致去重形同虚设。解决换成 4.2 的索引集合方案。如果你在使用成品页面观察它的历史记录区域是否每次都追加名字如果历史区没变化说明逻辑没生效直接改用主版本并配合控制台查报错。另一个更隐蔽的坑是页面有多个按钮你点的是“开始点名”而“不重复”逻辑绑定在另一个按钮上这种情况只能读代码确认。5.4 刷新页面后已抽记录全清空现象上课到一半不小心按了 F5页面重新加载后之前抽过的人又回到池子里没办法继续不重复点名。原因已抽集合存在内存变量里刷新即销毁。解决用 localStorage 持久化。抽取后写入localStorage.setItem(usedIndexes, JSON.stringify([...usedIndexes]));页面加载时恢复const saved JSON.parse(localStorage.getItem(usedIndexes) || []); usedIndexes new Set(saved);注意切换名单文件时旧索引长度可能大于新名单长度加载后判断一下如果saved.length names.length就清空并重置。这个判断容易漏漏掉的后果就是新名单还没开始抽系统就提示“全部抽完”。5.5 双击HTML被兼容模式打开现象在老电脑上双击 HTML页面能打开但点开始点名没反应控制台报错要么是const不支持要么是FileReader未定义。原因默认浏览器是旧版 Internet Explorer 或某些国产浏览器兼容模式不支持 ES6 和现代 Web API。解决右键选择“打开方式”指定 Chrome 或 Edge。这种工具不需要做得全军覆没把目标定为“在最近三年的浏览器上跑通”就够了。如果真要兼容 IE只能全面降级var代替const用 ActiveX 读文件但那些 API 早就被废弃不值得为此浪费时间。在公开课演示前先确认教室电脑的浏览器版本比临时找兼容方案重要十倍。6. 进阶把点名器做扎实——权重点名、语音播报与导出记录6.1 给“没举过手”的同学加权课堂场景里老师有时想把机会留给不怎么主动的学生。做法是给每个名字配一个权重权重越大被抽中的概率越高。最简单的实现是“按权重多次入池”权重为 2 的名字在抽选池里放两次之后从池子里随机选一个。const weightList { 张三: 2, 李四: 3, 王五: 1 }; const pool []; names.forEach(name { const weight weightList[name] || 1; for (let i 0; i weight; i) { pool.push(name); } }); const picked pool[Math.floor(Math.random() * pool.length)];这样处理后李四被抽中的概率就是张三的 1.5 倍。名单如果只有几十人池子膨胀到几百项完全没压力如果上千人还要加权内存也吃得下因为字符串引用不会真的复制多少数据。6.2 语音播报抽中的名字点名抽中后读出来课堂互动感会强不少浏览器自带语音合成接口就能实现const utterance new SpeechSynthesisUtterance(names[index]); utterance.lang zh-CN; speechSynthesis.speak(utterance);lang设为zh-CN才能触发中文语音包如果电脑没装中文声音会静音或读成拼音。建议在公开课之前提前试一句确认教室电脑有中文语音包不然到了现场才翻车比点名器本身出问题更尴尬。6.3 用Blob导出一节课的点名记录课后要统计谁回答过问题可以把整节课抽中的名字拼成一个字符串用 Blob 下载成 txt 文件function exportHistory() { const historyText Array.from(usedIndexes) .map(index names[index]) .join(\n); const blob new Blob([historyText], { type: text/plain;charsetutf-8 }); const a document.createElement(a); a.href URL.createObjectURL(blob); a.download 点名记录.txt; a.click(); URL.revokeObjectURL(a.href); }参数说明usedIndexes是 Set不能直接map先用Array.from转数组。revokeObjectURL是释放临时 URL避免内存泄露习惯写上。从那次公开课乱码翻车之后我每次交付点名器都强制走三遍第一遍用 GBK 名单测乱码第二遍用空名单测边界第三遍连抽十次确认不重复逻辑没失效。这套流程看着笨但能帮你挡掉绝大多数现场事故希望帮到你。本文还有配套的精品资源点击获取
