简介：这是一款基于HTML与JavaScript的随机点名器工具包，专为教师课堂提问、社团活动抽选等场景设计。在网页中通过文件选择按钮加载txt名单，利用FileReader读取并按行拆分为姓名数组，再借助Math.random随机抽取一名并动态展示，操作简单、公平高效；同时提供了随机不重复点名等增强逻辑，适合多次抽点需要。整份资源结构清晰，4个HTML页面负责界面与交互入口，1个JS脚本处理点名核心逻辑，2个txt名单文件分别使用GBK与UTF-8编码，便于不同环境下测试。压缩包仅11KB，共7个文件，轻量易学。目前已有318人学习下载。对Web前端初学者而言，这份资源是一份不错的练习范例，通过阅读源码可掌握HTML表单元素、FileReader API、数组操作和DOM更新等知识点；稍加修改，即可复用为抽奖、答题或分组工具，适合作为课程设计模板或基础项目参考。
1. 随机点名器用txt导入名单：一个HTML文件就能解决的课前两分钟
每学期开课第一周，我都要面对一个尴尬场景：手里一份纸质名单，念一个名字、抬头看一眼有没有人应，没应还得圈出来下课核对。后来试过PPT里那种抽奖动画，名单写死在页面里，临时加人、有人请假划掉都得改PPT，麻烦得要命。于是我就做了这个纯前端的随机点名器：一个HTML文件加上一个txt名单，双击打开就能用，点一下按钮，名字滚动停住，被点中的人一目了然。
这个工具的核心价值就三个词：不联网、无后端、一个文件。对老师、培训讲师、活动主持这类人群，它就是课前两分钟最省事的方案；对正在做html5网页设计作业的学生来说，它又是一个同时练到文件读取、DOM操作和数组逻辑的完整例子。全文我按自己做过一遍的顺序来讲，先把原理拆明白，再给能直接跑的代码，最后聊我实际用下来踩过的坑。
2. 先拆需求再写代码：随机原理、FileReader与功能边界
很多人拿到这个题目第一反应是“不就是抽个名字吗”，然后打开编辑器直接写。但真正用两次就会发现，问题全出在细节上：名单里混了空行、有人连着被抽中两次被学生质疑“有内幕”、txt用记事本保存后全是乱码。这章先把功能边界和核心原理讲清楚，后面写代码才不会翻车。
2.1 功能边界：点名器只需要做好三件事
先别急着给项目加功能，随机点名器的最小可用版本只需要三个动作：导入txt名单、随机抽取一个名字、把结果展示出来。剩下的一切，比如去重、历史记录、动画效果，都属于增量优化，可以在基础版本跑通之后再加。
我一般会用一张草稿纸把这个功能清单画出来，分“必须有”和“可以有”两栏。必须有的一栏只有三行：文件选择入口、名单解析逻辑、抽取按钮和结果展示区。可以有的一栏再写：已点名单去重、撤销上一次操作、点名历史导出、滚动动画。这么拆的好处是，每一轮迭代都能跑、都能用，而不是憋一个大版本最后什么都跑不起来。
2.2 随机点名不是“随机数”那么简单：洗牌才能保证公平
随机点名器的核心是“随机”。JavaScript里最直接的随机数来源是Math.random()，它返回一个[0, 1)区间内的浮点数，乘上名单长度再向下取整，就能得到一个名字下标。
const idx = Math.floor(Math.random() * names.length); const picked = names[idx];这里有个从业者容易忽略的坑：Math.random()每次调用都是独立的，它没有记忆。也就是说，如果你一节课要点10个人，每次都从完整名单里重新随机，那么某个人被点两次甚至三次是完全正常的概率事件。但课堂上的学生不会这么理解，他们会认为这个点名器“有规律”“不公平”。
常见的做法是改成洗牌抽取：把名单打乱顺序，然后按顺序一个一个点。这样一轮之内每个人只会被点到一次，公平性肉眼可见，质疑声自然就没了。洗牌算法最常用的是Fisher-Yates，从数组末尾开始往前遍历，每轮把当前位置和前面随机位置交换，时间复杂度O(n)，一遍就能把顺序打乱。
2.3 名单导入用FileReader：为什么不建议用textarea粘贴
名单导入有两种常见方案：一是放一个textarea让用户自己粘贴名单，二是用FileReader读取txt文件。我做过对比，也踩过坑，最终稳定用的是FileReader读文件。
textarea粘贴方案的问题在于不可控：用户从微信群复制名单，可能带出表情符号、首尾空格、空行；手误删掉一个名字也看不出来。而txt文件读取是结构化的，每行一个名字，解析规则简单清晰，用户只需要维护好自己的txt就行。另外，用文件导入的方式更贴近“网页设计”作业里“文件上传与解析”这个考点，html+css+js三个能力都能覆盖到。
readAsText方法有两个参数，第一个是File对象，第二个是编码格式。这个编码参数是不少人忽略的重点：如果txt是用Windows记事本默认的ANSI编码保存的，里面又有中文，那么按UTF-8去读就会乱码。这个坑我在第5章专门展开讲，这里先记住一个结论：统一让用户把txt存成UTF-8编码，代码里也明确用UTF-8读取，两边对上有九成问题都不会发生。
3. 写一个能直接跑的版本：html+css+js核心代码与参数解析
这章给出一个完整可运行的最小版本。我建议你不要直接复制完就跑，而是把我标注的几个关键参数亲手改一改，比如编码、分隔符、过滤条件，这样出了问题你知道去哪改。
3.1 页面骨架：文件选择、名单预览、点名按钮一个都不能少
先说HTML结构。这个页面不需要任何框架，一个标准的HTML文件就行。注意文档头部的声明：<!doctype html>、<html lang="zh-cn">、<meta charset="utf-8">这三个一个都不能少，尤其是charset="utf-8"，它决定浏览器以什么编码解析你的页面，和后面读txt的编码是两回事但同样重要。
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>随机点名器</title> <style> body { font-family: "Microsoft YaHei", sans-serif; max-width: 640px; margin: 40px auto; padding: 0 16px; } #preview { width: 100%; height: 200px; margin: 12px 0; font-size: 14px; } .btn { padding: 10px 28px; font-size: 18px; cursor: pointer; } .btn:disabled { background: #ccc; cursor: not-allowed; } #result { margin-top: 30px; font-size: 42px; font-weight: bold; min-height: 60px; text-align: center; } #status { margin-top: 12px; color: #666; font-size: 14px; } </style> </head> <body> <h1>随机点名器</h1> <input type="file" id="fileInput" accept=".txt"> <textarea id="preview" placeholder="选择txt文件后，这里会显示名单预览" readonly></textarea> <button class="btn" id="pickBtn" disabled>开始点名</button> <div id="result"></div> <div id="status"></div> <script src="app.js"></script> </body> </html>按钮初始状态是disabled，这是刻意的：名单还没导入之前，点名按钮必须不可用，避免用户手快点了之后发现结果区一片空白，以为程序坏了。accept=".txt"是文件选择框的过滤条件，虽然用户仍然可以手动选其他类型文件，但至少默认视图里只显示txt，能挡掉一部分误操作。textarea设置成readonly，名单预览只读，防止用户手滑改了内容造成“页面显示的名单和实际点名结果不一致”这种诡异问题。
3.2 核心逻辑：按行解析txt、过滤脏数据、随机抽取
这里是整个点名器的心脏，我把它写在独立的app.js里。逻辑分三步：监听文件选择事件、读取并解析txt内容、点击按钮时随机抽取。
const fileInput = document.getElementById('fileInput'); const preview = document.getElementById('preview'); const pickBtn = document.getElementById('pickBtn'); const result = document.getElementById('result'); const status = document.getElementById('status'); let names = []; fileInput.addEventListener('change', function(e) { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = function(ev) { const content = ev.target.result; names = content .split('\n') // 按换行符切分成数组 .map(line => line.trim()) // 去掉每行首尾空格 .filter(line => line.length > 0); // 丢掉空行 preview.value = names.join('\n'); pickBtn.disabled = names.length === 0; status.textContent = '已导入 ' + names.length + ' 个名字，可以开始点名'; }; reader.readAsText(file, 'utf-8'); // 明确用 utf-8 读取 }); pickBtn.addEventListener('click', function() { pickOne(); }); function pickOne() { if (names.length === 0) { result.textContent = '名单是空的，先导入txt吧'; return; } const idx = Math.floor(Math.random() * names.length); result.textContent = names[idx]; }split('\n')这一步是整个解析逻辑的地基，它假定txt里每个名字占一行。如果你的名单是用逗号或顿号分隔的，改这里就行，比如用split(',')。trim()会把每行首尾的空白字符去掉，包括空格和制表符，这个动作能解决大部分“明明有名字但显示不出来”的问题。filter(line => line.length > 0)把空字符串丢掉，防止名单末尾多一个换行符导致空条目混进去。
readAsText(file, 'utf-8')的第二个参数是读取编码，我在这里显式写明UTF-8，防止某些浏览器默认用系统编码去解码。这里编码错了，表现就是第5章要讲的乱码问题。抽名的核心就一行：Math.random() * names.length产生一个0到名单长度之间的小数，Math.floor()向下取整得到合法下标。这里不能用Math.round()，因为它会在首尾两个下标上产生一半概率的偏差，虽然肉眼感觉不出来，但做技术的人心里得清楚。
3.3 交互反馈：按钮可用状态、抽中结果与剩余人数
一个容易被忽略的细节是交互反馈。点名器用起来顺不顺，不看功能多不多，看状态反馈是否清楚。有三个状态必须在界面上让用户一眼看到：名单导入成功没有、当前总共多少个人、上一次抽中了谁。
我的做法是用status这个div显示当前状态文案，代码里的'已导入 ' + names.length + ' 个名字'就是干这个的。很多人做网页设计作业时会漏掉这段，导致用户点了文件之后页面毫无反应，还以为没选上。另外，抽中结果用textContent赋值而不是innerHTML，这个细节很关键：学生名单里如果有人叫<b>张三</b>或者 这种带HTML特殊字符的名字，用innerHTML会被浏览器解析成标签或实体，轻则显示不对，重则页面崩掉。textContent是纯文本赋值，不存在这个问题。
还有一个我后来补上去的小功能：连续点名的场景下，把已点过的名字标记出来。最简单的实现是把抽中的名字追加到一个数组里，然后在status区域显示“已点：张三、李四”。这里不展开，下一章我会把完整的去重和撤销方案单独讲。
4. 从“能跑”到“好用”：去重点名、历史撤销与导出点名记录
第3章的版本已经能在课堂上用了，但你会发现一个实际问题：如果一节课要点10个人，每次都从全名单随机抽，前9次可能都抽到前几个，最后一个怎么都轮不到。这节我把它升级成一个能长期使用的工具，核心是三个能力：点过的人不再重复点、误点能撤销、点名结果能导出来存档。
4.1 三状态名单管理与洗牌抽取
去重点名的正确做法不是“每次随机时检查这个人在不在已点列表里”，而是把名单拆成“未点”和“已点”两个池子，以及一个“原始名单”用来重置。我推荐用洗牌加指针的方式：开局把名单打乱，然后从第一个开始依次取，取到最后一个说明这一轮全部点完。
let allNames = []; // 原始完整名单，用于重置 let queue = []; // 打乱后的待点队列 let history = []; // 已点名记录 function resetQueue() { queue = shuffle([...shuffle(allNames)]); history = []; status.textContent = '本轮共 ' + queue.length + ' 人，已开始'; } function shuffle(arr) { for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; } function pickNext() { if (queue.length === 0) { result.textContent = '本轮所有人都点过了'; return; } const picked = queue.pop(); // 从尾部取，避免频繁操作数组头部 history.push(picked); result.textContent = picked; status.textContent = '剩余 ' + queue.length + ' 人未点'; }shuffle里那段[arr[i], arr[j]] = [arr[j], arr[i]]是ES6的解构赋值交换法，比传统的临时变量写起来简洁，但如果你要兼容IE11就得换回三行临时变量写法。queue.pop()从数组尾部取元素并删除，时间复杂度O(1)，比shift()从头部取要高效，因为shift()会触发整个数组元素前移。这个细节在几百人的大名单里感知不明显，但面试或答辩时被问到“为什么用pop不用shift”，答得上来就是加分项。
[...shuffle(allNames)]先洗一次牌，再拷贝一份洗后的结果，是为了保证即使上一轮queue被改动过，重新洗牌时也是基于原始名单，而不是基于已经部分消费的队列。这个细节容易出bug，我自己就翻过车：第一次写的时候直接shuffle(allNames)，结果把原始名单也打乱了，重置之后再洗一次顺序就不对了。
4.2 放在历史里做操作日志与撤销
手动点名最容易误操作：嘴里念的是张三，手指点下去却是李四。所以撤销功能不是锦上添花，是刚需。实现思路也简单：从history里把最后一个名字拿出来，放回queue。
function undoPick() { if (history.length === 0) { status.textContent = '还没有点过任何人'; return; } const last = history.pop(); queue.push(last); result.textContent = '已撤销：' + last; status.textContent = '剩余 ' + queue.length + ' 人未点'; }这里要注意一个顺序问题：history.pop()取出来的是最近一次点的名字，直接queue.push()放回尾部就行，因为下一轮pickNext()还是从尾部取，这样撤销的人下一轮被抽中的概率并不会不公平——反正顺序已经打乱了。如果你想要“撤销后这个人回到队列头部”，那就得用queue.unshift(last)，但要意识到这会改变原本的抽取顺序，下一轮必定抽到这个人。
历史记录除了支持撤销，还应该做到“可见”。我习惯在界面右侧放一个只读的textarea展示history.join('、')，这样老师能随时看到这节课已经点了谁，下课登记出勤也方便。这一步不用写任何额外逻辑，把数组拼成字符串赋值给textarea就行。
4.3 导出点名记录：用Blob把结果写成txt
点完名之后还有个需求：把记录存下来。纯前端页面没有后端，怎么保存？答案是让浏览器自己触发文件下载，核心是Blob加URL.createObjectURL。
function exportHistory() { const fileName = '点名记录_' + new Date().toISOString().slice(0, 10) + '.txt'; const payload = history.map((name, i) => (i + 1) + '. ' + name).join('\n'); const blob = new Blob([payload], { type: 'text/plain;charset=utf-8' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = fileName; link.click(); URL.revokeObjectURL(link.href); }new Blob([payload], { type: 'text/plain;charset=utf-8' })把字符串包装成二进制数据，第二个参数指定MIME类型为纯文本。URL.createObjectURL(blob)生成一个临时的blob:地址，把它赋给<a>标签的href，download属性指定下载文件名，然后link.click()模拟点击。最后必须调URL.revokeObjectURL(link.href)释放这个临时URL，不然在Chrome里连续导出多次可能报内存警告。
文件名里带new Date().toISOString().slice(0, 10)是为了让记录自动按日期区分，导出10次就不会互相覆盖。type: 'text/plain;charset=utf-8'这里再次指定UTF-8，保证导出的txt再用记事本打开时，中文不会乱。这个导出能力不只能用于点名记录，任何纯前端生成的文件下载场景，比如导出CSV、导出日志，都是同一套模板。
5. 随机点名器踩坑排查：乱码、空名单、假随机与浏览器兼容
这一章是我实际用下来最想留给后来者的部分。点名器看起来功能简单，但我在教室电脑上翻车的次数，比写这个工具本身用的时间还多。每一条我都按“现象→原因→解决”来讲，你可以直接当排查手册用。
5.1 记事本保存的txt导入后中文全是乱码
现象：导入txt之后，预览区和点名结果里中文全是一堆“锟斤拷”“烫烫烫”或者一个个方块问号，英文和数字正常。这是典型的编码错位。
原因：Windows记事本默认的“另存为”编码是ANSI（中文系统下就是GBK），而readAsText(file, 'utf-8')明确让浏览器按UTF-8解码。一个用GBK编码的文件被强行按UTF-8读，中文部分自然就变成乱码。这个坑在纯英文名单里永远不会出现，一有中文必现。
解决：最简单的方案是在代码里做兜底——先用UTF-8读，如果解析出来的内容里包含乱码特征字符（比如\uFFFD），就用TextDecoder按GBK重新解码一次。
reader.readAsArrayBuffer(file); // 先按二进制读 reader.onload = function(ev) { const buf = ev.target.result; // 先用 UTF-8 解码看看 let text = new TextDecoder('utf-8').decode(buf); if (text.includes('\uFFFD')) { // 有替换字符，说明 UTF-8 解不开，改用 GBK text = new TextDecoder('gbk').decode(buf); } names = text.split('\n').map(s => s.trim()).filter(s => s.length > 0); };但我更推荐的方案是双管齐下：代码里做上面的兼容，同时在页面明显位置写一句“请将txt保存为UTF-8编码”。因为TextDecoder('gbk')并不是所有浏览器都支持完整GBK字符集，遇到一些生僻字仍可能失败。最可靠的做法还是源头控制：用户把txt另存为时编码选UTF-8，所有麻烦都省了。我在实际用的时候，干脆在自己电脑上把名单存成了UTF-8，拿到教室电脑上用，稳如老狗。
5.2 名单里有空行或带空格的名字会抽中空白
现象：导入后人数统计没错，但有时候抽中的结果看起来是空的，或者名字前面多了一个空格，在结果区里显示不全。
原因：txt文件末尾通常有一个换行符，导致split('\n')之后数组最后一项是空字符串。如果名单是从Excel复制出来的，还可能存在“行首有缩进空格”的情况，比如张三。如果直接用names[idx]抽中这一项，结果区显示的就是空白或者带缩进的名字。
解决：第3章的解析代码里已经处理了，trim()加filter(line => line.length > 0)这两步缺一不可。但有个边界情况容易漏：全角空格和中文不换行空格（\u00A0）trim()是去不掉的，这是我在一份从微信复制出来的名单上踩到的。处理方法是把过滤条件升级成正则：
names = text .split('\n') .map(line => line.replace(/[\s\u00A0]+/g, ' ').trim()) .filter(line => line.length > 0);replace(/[\s\u00A0]+/g, ' ')把连续的空格、制表符、全角空格统一替换成单个半角空格，然后trim()去掉首尾。这样处理过之后，即使名单来源再脏，抽出来的名字也是干净的。
5.3 “随机是假的”：连续抽中同一人被学生质疑
现象：用全名单随机点名，有人一节课被点两次，有人一次都没被点，学生当场说“这个点名器有规律”“是不是针对我”。
原因：随机就是会有重复，这是概率论的基本事实，但课堂场景下用户不会接受这种“独立随机”。Math.random()没有记忆，上一轮抽中谁跟下一轮毫无关系。
解决：如果点名场景是“一节课要点多个人”，直接切换到第4章的洗牌队列模式，保证一轮内不重复。如果场景是“每次上课随机抽查一个人”这种独立事件，那就在界面上明确告诉学生：每次点名和上一次没有关系，纯独立随机。我的习惯是课堂点名一律用洗牌模式，公平性一眼就能看穿，压根不用解释。这个决策本身也是网页设计里的取舍：技术合理不等于产品合理，要按场景选方案。
5.4 修改txt后页面还在用旧名单
现象：我在电脑上改好了新名单，保存后回到浏览器继续点名，结果抽到的还是旧名字，刷新页面也没用。
原因：这里要看你的修改对浏览器是否可见。如果你是“重新选择同一个文件”，浏览器有可能因为文件没变（文件名和路径相同）而不触发change事件；如果你是直接改了磁盘上的txt，浏览器里打开的页面根本不会知道文件变了。
解决：文件选择框每次重新选择前先把value清空，就能强制触发change事件：
fileInput.value = ''; // 清空后再次点击文件选择，即使选同一个文件也会触发 change另外我在页面上加了一个“重新加载名单”按钮，点击后执行fileInput.value = ''; fileInput.click();，换名单这个操作就变成一个明确的用户行为，而不是依赖浏览器状态。这是一个很容易被忽略的交互设计细节：文件选择框的change事件只在用户“选择了一个不同文件”时触发，同一个文件的重复选择会被浏览器忽略，清空value是绕过这个限制的常用手段。
5.5 教室电脑双击HTML文件打不开或白屏
现象：U盘拷过去的HTML文件，在教室电脑上双击，要么没反应，要么白屏，F12打开控制台一片红。
原因：大概率是浏览器版本太老，不支持新版JavaScript语法。老教室电脑上经常是旧版Chrome，偶尔还有IE。第4章里的[arr[i], arr[j]] = [arr[j], arr[i]]解构交换在旧浏览器上直接报SyntaxError，整个脚本挂掉，页面自然白屏。
解决：我的做法是写两套构建目标——自己机器上开发随便用新语法，但最终拿到教室用的版本会做一次保守处理：不用解构赋值、不用let/const（改回var）、不用箭头函数。其实还有个更省事的思路：点名器这种工具对性能完全没要求，干脆全程用ES5语法写，一份代码到处跑。下面是ES5版洗牌的写法：
function shuffle(arr) { for (var i = arr.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var tmp = arr[i]; arr[i] = arr[j]; arr[j] = tmp; } return arr; }另外注意file://协议下，部分浏览器对本地文件的读取权限有限制，如果你的页面在本地能打开但读不了txt，提示文件访问被拒，可以试试用命令行起个静态服务，常见做法是装好Python后直接在目录下跑python -m http.server 8000，然后浏览器访问http://localhost:8000。这个操作复杂度高一点，但比在浏览器安全策略上死磕靠谱得多。
6. 加一个滚动抽选动画：用速度曲线让点名更有现场感
点名器用了两周之后，有学生说“太直接了，一点就出来，没那味儿”。于是我给结果展示加了一个滚动动画：名字快速切换，然后速度越来越慢，最后停住。效果上和彩票开奖那种悬念感类似，成本只要几十行代码，是投入产出比最高的一次改动。
function animatePick() { const totalSteps = 30; // 总滚动步数 const maxDelay = 240; // 最慢间隔（毫秒） const minDelay = 50; // 最快间隔（毫秒） let step = 0; function tick() { // 每一步都随机显示一个名字，下一轮会被覆盖 result.textContent = names[Math.floor(Math.random() * names.length)]; step++; if (step >= totalSteps) { // 最后一步显示真正抽中的结果 finalPick(); return; } // 速度曲线：前60%保持快速，后40%线性减速 const progress = step / totalSteps; const delay = progress > 0.6 ? minDelay + (maxDelay - minDelay) * ((progress - 0.6) / 0.4) : minDelay; setTimeout(tick, delay); } tick(); }totalSteps控制动画总时长，30步乘以平均约100毫秒的间隔，总时长在3秒左右，节奏刚好；maxDelay和minDelay定义了速度的变化范围，50毫秒到240毫秒之间是一个适合人眼跟上的区间。速度曲线的设计是这段代码的精髓：前60%的进度里保持最快速度，让名字飞速滚动，看起来是“真要抽了”；后40%开始线性减速，制造悬念。你可以在调用finalPick()之前再插入一次setTimeout，让最后一次停顿持续半秒，这种“将停未停”的瞬间是现场感最强的时刻。
实际用下来，我发现动画还有个意外好处：在名字滚动的那两三秒里，全班的眼睛都会盯着屏幕，注意力被集中起来了。这比直接出名字更有课堂仪式感。我的使用习惯是每次上课前先用一份测试名单把工具跑一遍，确认没有乱码、空行、按钮状态正常，再切换到真实名单。点名器这种小工具，信任感是最重要的，只要翻过一次车，后面再解释都没用。希望帮到你。
本文还有配套的精品资源，点击获取
