企业官网建设流程全解析

一说到html简单随机抽奖页面，很多人的第一反应是去网上找第三方抽奖平台，又是注册又是上传名单，最后还得担心算法到底公不公平。其实用纯HTML、CSS和JavaScript，手写一个完全可控的在线抽奖页面，一点不复杂。名单填进去，页面自动滚动，点一下停止就完成随机选取；想一次抽出好几个人，只要切到自动挑选模式。这类页面特别适合公司年会暖场、课堂随机点名、部门活动选人，以及各种需要“当场挑一个人出来”的场景。就算你刚接触前端，只要能看懂最基础的标签和函数，照着做也能在一个小时内跑通全流程。

这篇文章我打算把整个拆解过程、完整代码和踩过的坑一次性分享出来。你不会看到复杂框架，也不需要装任何环境，最后拿到的就是一个HTML文件，双击就能跑。它解决的核心问题很简单：给一份名单，公平、快速、可视地选出一个人或一群人。

1. 一个抽奖页面到底在抽什么？

1.1 需求拆解：在线抽奖核心功能

做任何小工具之前，先别急着写代码，我会拿张纸把需求列一下。这个抽奖页面的核心动作其实只有三个：输入名单、随机抽取、展示结果。再看看标题里的“在线抽奖、随机选取、自动挑选”，大概率还希望它满足批量抽人、结果可留痕。我把它整理成一张优先级表：

名单输入是第一步，不能用硬编码写死几个名字在代码里，不然换个场合还得改源代码。最合适的做法是放一个textarea，让用户直接粘贴Excel里的姓名列，然后由JavaScript去解析。随机抽取是核心，但这里的“随机”有两个层次：一是单次抽取的随机，二是多次抽取之间不能重复。现场抽奖最忌讳抽着抽着发现刚才中过的人又出现了，观众会觉得你在搞黑幕。

抽奖动画对氛围的影响比想象中大。一个名字在屏幕上快速滚动，滚动期间大家会不自觉地屏住呼吸，停止那一刻全场目光都盯着屏幕，这就是活动要的仪式感。如果没有动画，直接弹出一行字“张三中奖”，效果就差很多。中奖记录也建议保留，尤其是连续抽多个奖项时，主持人需要知道哪些人已经中过，哪些人还有机会。自动挑选则是用来提高效率的，比如从一百人里抽5个幸运奖，不可能让主持人手点5次停止，最好点一下自动跑完。

1.2 技术选型：一个HTML文件解决全部问题

为什么选择纯前端单文件？最直接的理由是部署成本为零。双击一个HTML文件就能在浏览器打开，不需要安装Node、不需要数据库、不需要服务器。活动抽奖的名单通常也就几十到几百人，每个人名只是字符串，这点数据量对浏览器来说可以忽略不计。

有人会说：“前端随机数不可控，会被作弊。”这个说法有道理，如果奖品价值高、公司要求结果可审计，那确实应该把抽奖逻辑放在服务端并记录日志。但大部分场景，比如团建、课堂、朋友聚会，客户端随机已经够用，而且代码是开着的，随时能被检查。真正要做严肃抽奖时，你也可以把这套页面里的算法搬到Node端，前端只负责展示，逻辑完全不变。

单文件的另一个好处是方便局域网投屏。把文件放到电脑上，浏览器全屏，接上大屏就能用。没有网络也能跑，不用担心活动现场WiFi掉链子。后续想要扩展，比如加音效、加动画、加本地保存，也都能在同一个文件里完成，维护成本很低。我之前见过有人为做个抽奖页引入Vue全家桶加打包工具，最后光依赖安装就花了半小时，对大多数轻量活动来说，这属于杀鸡用牛刀。

2. 从名单到随机：核心逻辑拆解

2.1 名单管理与数据准备

名单输入这块，我习惯直接放一个textarea，让用户粘贴Excel里的姓名列。实际拷贝过来的数据格式五花八门，有换行的、有逗号的、有中文顿号的，所以分隔正则要写全：

function parseNames(raw) { return raw .split(/[\n,，、;；]+/) .map(function (name) { return name.trim(); }) .filter(function (name) { return name.length > 0; }); }

这里的map和filter别省。有些人名前面带着空格，或者名单里混着空行，如果不处理，抽奖时会出现空白名字，放到大屏上非常尴尬。按多个分隔符切分后，再逐个trim掉首尾空白，最后用filter把空字符串过滤掉，得到的就是一份干净的数组。

如果名单里有重名，默认当作同一个人处理，用Set去重就行：

const uniqueNames = [...new Set(parseNames(nameInput.value))];

Set去重简单高效。但要注意，如果公司里有两个“王伟”，你需要通过工号区分，那就在名字后面加编号，写成“王伟(001)”和“王伟(002)”，这样去重时它们就不会被合并。去重之后，最好在前端给出一个提示，比如“共识别到48个名字，已去重2个”，让操作者心里有数。

准备名单时还有一个容易忽略的点：初始名单和中奖池的关系。建议保留一个names变量存放全量名单，之后每次重置都从它复制一份到pool。不要直接用用户从textarea读取的结果反复覆盖，否则一旦抽到一半不小心点错，没办法恢复。

2.2 随机算法：明明白白的抽奖逻辑

抽奖的核心不是页面样式，而是随机算法。简单场景用Math.random()就够了：

function pickOne(list) { const idx = Math.floor(Math.random() * list.length); return list[idx]; }

这段代码背后的原理是：Math.random()生成一个[0,1)之间的浮点数，乘以数组长度后得到一个[0, length)之间的小数，再用Math.floor向下取整，最终得到0到length-1的整数下标。因为浮点数在[0,1)上均匀分布，所以每个下标被选中的概率都是1/length，这就是公平性来源。

不过如果你要一次性抽出一二三等奖，我会推荐Fisher-Yates洗牌算法：

function shuffle(list) { const arr = [...list]; 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; }

洗牌之后，直接把数组前几个元素当作一等奖、二等奖、三等奖。这样比每次从池子里随机选一个更直观，也更容易保证奖项之间不重复。洗牌算法的时间复杂度是O(n)，对几十几百人的名单来说，性能上毫无压力。

这里提醒一句，千万别用arr.sort(() => Math.random() - 0.5)来洗牌。这个写法看起来很巧妙，但它违背了排序函数的一致性要求，会产生概率偏差，在一些浏览器里甚至会让部分元素停留在原位的概率明显偏高。我后面会专门把这类坑列出来。

2.3 防重复：让每个人只有一次机会

默认情况下，一个人中了一次奖，本轮活动中不应该再被抽中。所以需要维护两个数组：总池子pool和已中奖者winners。每次抽完，把winner移到winners，并且从pool里移除：

const pool = [...names]; const winners = []; function drawOne() { if (pool.length === 0) { alert('池子里没人了'); return null; } const idx = Math.floor(Math.random() * pool.length); const winner = pool[idx]; winners.push(winner); pool.splice(idx, 1); return winner; }

这里有个小坑：直接用splice会改变原数组，所以初始化pool时一定要复制一份，避免影响到初始名单。如果后续要重置，直接用pool = [...names]重建就行。

如果要做“允许重复中奖”的模式，逻辑更简单：不执行splice，抽完就放回池子。实际做页面的时候，我在设置区加了一个复选框，默认不勾选，勾上后走另一条逻辑，同一个页面就能兼容两种玩法。防重复还有一个边界情况要处理，就是当pool为空时，再点开始或者自动挑选应该给出提示，而不是让页面报错。可以弹出“当前可抽名单已空，是否重置？”的确认框，用户确认后自动恢复全量名单。

3. 动手做一个可直接用的抽奖页

3.1 页面结构和视觉设计

结构上先搭一个main容器，核心元素有显示区、操作按钮、设置项、名单输入区和结果列表。为了适合投屏，显示区字体一定要大，背景和文字颜色要对比强烈：

<main class="draw-box"> <h1>在线随机抽奖</h1> <div id="display" class="display">准备开始</div> <div class="actions"> <button id="startBtn">开始</button> <button id="stopBtn" disabled>停止</button> <button id="autoBtn">自动挑选</button> <button id="resetBtn">重置</button> </div> <div class="settings"> <label>抽取人数 <input type="number" id="drawCount" min="1" value="1"></label> <label><input type="checkbox" id="allowRepeat"> 允许重复中奖</label> </div> <textarea id="nameInput" placeholder="每行一个名字，或按逗号分隔"></textarea> <ul id="resultList"></ul> </main>

显示区是整个页面的视觉中心，我用一个比较大的区域专门显示当前滚动中的名字。这个区域要有固定的最小高度，否则名字变长时页面会上下跳动。可以设置min-height: 180px，再用flex居中。背景用深蓝或深紫，文字用浅色，这样在大屏上看起来比较清楚。按钮区做成一行flex布局，手机端访问时自动换行，保证按钮不被挤压。

名单输入区和结果列表放在显示区下方，平时可以折叠起来，投屏时只展示显示区和按钮，避免名单暴露在大屏幕上。这个用CSS类切换就能实现，不需要额外引入组件库。我的做法是给textarea和结果列表加上一个collapsed类，默认隐藏，需要编辑名单时点一下右侧的“编辑名单”按钮再展开。

3.2 核心JavaScript实现：开始、停止与重置

现在到了最关键的部分。先声明需要用到的DOM元素和状态变量：

const display = document.getElementById('display'); const startBtn = document.getElementById('startBtn'); const stopBtn = document.getElementById('stopBtn'); const autoBtn = document.getElementById('autoBtn'); const resetBtn = document.getElementById('resetBtn'); const nameInput = document.getElementById('nameInput'); const drawCountInput = document.getElementById('drawCount'); const allowRepeatCheck = document.getElementById('allowRepeat'); const resultList = document.getElementById('resultList'); let names = []; let pool = []; let winners = []; let timer = null; let currentDisplayName = '';

开始按钮的逻辑是启动一个定时器，每隔几十毫秒从pool里随机取一个名字显示到屏幕上。这里我建议用60毫秒左右的间隔，人眼看起来滚动很快，但不会因为太快导致视觉闪烁：

function start() { const parsed = parseNames(nameInput.value); if (parsed.length === 0) { alert('请先输入名单'); return; } if (names.length === 0 || pool.length === 0) { names = parsed; pool = [...names]; winners = []; } if (pool.length === 0) { alert('当前没有可以抽取的人，请重置'); return; } startBtn.disabled = true; stopBtn.disabled = false; timer = setInterval(function () { const idx = Math.floor(Math.random() * pool.length); currentDisplayName = pool[idx]; display.textContent = currentDisplayName; }, 60); }

停止按钮的逻辑正好反过来，清除定时器，把当前显示的名字固定下来，然后加入中奖名单。如果是非重复模式，还要把这个人从pool里移除：

function stop() { if (timer === null) return; clearInterval(timer); timer = null; display.textContent = currentDisplayName; if (currentDisplayName) { winners.push(currentDisplayName); if (!allowRepeatCheck.checked) { pool = pool.filter(function (name) { return name !== currentDisplayName; }); } renderResult(); } startBtn.disabled = false; stopBtn.disabled = true; }

这里有个细节值得说：中奖者的确定是在停止时完成的，而不是在定时器回调里。定时器回调里不断变化的currentDisplayName仅仅用于展示，真正确定中奖的是停止那一刻。这个设计让逻辑清晰，也方便后续的自动挑选模式复用。

重置按钮要做的就是把所有状态恢复初始：

function reset() { clearInterval(timer); timer = null; names = parseNames(nameInput.value); pool = [...names]; winners = []; resultList.innerHTML = ''; display.textContent = '准备开始'; currentDisplayName = ''; startBtn.disabled = false; stopBtn.disabled = true; }

结果列表的渲染我用了简单的li拼接，同时给每个新加入的项做了一个淡入动画。如果名单很多，建议限制列表最大高度并加滚动条，避免结果把页面撑得太长。

3.3 自动挑选与连抽模式

自动挑选是标题里的另一个关键词。它对应的需求是：一次点击，抽出多个人。最简单的实现是循环调用drawOne：

function autoDraw() { const count = parseInt(drawCountInput.value, 10) || 1; if (names.length === 0) { names = parseNames(nameInput.value); pool = [...names]; } if (count < 1) return; if (!allowRepeatCheck.checked && pool.length < count) { alert('剩余人数不足，无法抽取 ' + count + ' 人'); return; } const roundWinners = []; for (let i = 0; i < count; i++) { const winner = drawOne(); if (winner) roundWinners.push(winner); } winners.push(...roundWinners); renderResult(); }

这个版本是瞬间完成抽取的，好处是快，但缺少现场感。更推荐做一个带动画的版本：每轮先让名字滚动1.2秒，然后自动停止，展示一个中奖者，隔0.4秒再开始下一轮。用async/await加一个sleep函数，实现很直观：

function sleep(ms) { return new Promise(function (resolve) { setTimeout(resolve, ms); }); } async function autoDrawWithAnimation() { const count = parseInt(drawCountInput.value, 10) || 1; if (count < 1) return; if (!allowRepeatCheck.checked && pool.length < count) { alert('剩余人数不足'); return; } autoBtn.disabled = true; for (let i = 0; i < count; i++) { start(); await sleep(1200); stop(); await sleep(400); } autoBtn.disabled = false; }

注意这个函数里复用了start和stop，它们各自负责按钮状态切换，所以循环结束后要手动把autoBtn恢复。每次start前要确保当前不在运行状态，否则会叠加多个定时器。这个坑我在写第一个版本时踩过，连点“自动挑选”按钮，结果页面开了好几个定时器，名字跳来跳去，最后只能刷新页面。

4. 实操中的坑与经验

4.1 随机算法相关的坑

写随机抽奖页最容易踩的不是业务逻辑，而是随机数使用方式。我整理了几个高频问题：

索引越界这个问题很隐蔽。Math.random()的结果永远不会是1，所以Math.ceil(Math.random() * n)的结果最大是n，但数组索引最大是n-1，于是最后一个位置永远不会被选中，还会在多轮抽取后越界得到undefined。有人觉得用ceil看起来很顺手，实际写出来越界报错时才反应过来。

另外，用sort洗牌的错误在国内网上的代码里特别常见。它的思路是利用随机比较函数让排序结果混乱，但JavaScript的排序算法依赖比较函数的传递性，随机返回正负值会破坏这种一致性，导致结果分布不均匀。真想洗牌，就老老实实写Fisher-Yates，代码也就几行。

还有一个坑是关于重复中奖的。有人会在抽完后从names数组里splice删除，这样做第一轮没问题，但重置时nameInput里的原文并没有变，如果用户重新点开始，names已经残缺，会出现“抽到一半发现名单越来越少”的情况。建议用独立的pool变量，names始终保持全量名单，重置时从names复制，这样最安全。

4.2 动画、性能与交互细节

名字滚动动画用setInterval就够，但要注意间隔时间。太短（比如30ms）会让部分显示器刷新率跟不上，产生闪烁感；太长（比如200ms）现场又不够紧张。我用60ms体验最好，兼顾节奏和流畅度。

显示区域一定要固定尺寸。名字长度不同，如果display没有固定高度，出现一个“麦克斯韦”会把按钮区往下顶，整个页面乱跳。我建议给display设min-height和line-height，再用flex把文字居中，内容长了可以等比缩放字体。长名字还可以用CSS截断：

#display { font-size: 56px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

按钮防重复点击也必须处理。开始后立刻禁用开始按钮，停止后重新启用；停止后要检查timer是否为null，避免用户连点两次导致clearInterval一个已经不存在的定时器。自动挑选期间，所有按钮都应该禁用，避免并发操作。

如果想增强体验，可以加一个键盘快捷键：按空格键开始/停止。这个我实际测试过，活动现场主持人不用低头找鼠标，体验提升很大。实现方式就是监听键盘事件，忽略按钮获得焦点时触发的空格默认行为。

4.3 部署与分享：让页面真正跑起来

写完的HTML文件可以直接双击打开，这是最省事的方案。但有些浏览器对本地文件有安全限制，虽然这个页面不涉及跨域请求，一般没问题。如果想在局域网内让手机也访问，可以在同目录下开一个简单的静态服务：

python3 -m http.server 8080

同一WiFi下的设备访问http://你的电脑IP:8080/文件名.html就能打开抽奖页。这个方式特别适合活动现场，手机扫码进入后自己输入名单，把结果投到大屏上。

如果暂时不想暴露源代码给别人，还可以把整个页面转成data URL，生成一个非常短的特殊链接。格式类似data:text/html;charset=utf-8,<html>...</html>，把HTML内容编码后直接放入浏览器地址栏就能运行。不过这个链接长度有限制，比较长的页面不适合，而且需要注意特殊字符转义。它更多是用来快速演示一个原型，不适合日常使用。

更正式的部署方式是把文件扔到任意静态托管平台，比如GitHub Pages或Netlify，绑定一个域名，任何人打开就是页面。这时候可以顺手加一套好看的Logo、标题、背景图，让抽奖页看起来更像正式活动页面。

5. 从“能用”到“好用”：扩展思路

5.1 加点音效和动效

纯视觉的抽奖也能用，但加上音效之后现场感会强很多。不需要准备音频文件，用Web Audio API就能生成简单的“隆隆”滚动声和“叮”的停止声。滚动期间可以播放低音量循环，停止瞬间播放一个短促的提示音。代码大概几十行，可以在网上找到封装好的Beep函数，也可以自己写一个。

动效方面，除了名字滚动，还可以做一个“光子边框”或“聚光灯”效果。用CSS动画在抽奖区域周围画一个动态发光的边框，停止那一刻边框闪烁一次，视觉反馈更明显。这些都属于锦上添花的优化，不影响核心逻辑，但能让活动氛围上一个台阶。

5.2 数据持久化与自定义奖品

如果希望在活动进行中意外刷新页面后还能恢复之前的抽奖结果，可以把名单、中奖者、剩余池存到localStorage里。刷新时检测到有存档，询问用户“检测到上次抽奖记录，是否恢复？”，这能避免很多尴尬。

另外可以把展示文案从“中奖者”改成“奖品+中奖者”。抽奖前设置奖品列表，比如“一等奖：蓝牙耳机；二等奖：保温杯；三等奖：U盘”，自动挑选时按顺序把奖品填充到结果列表里。这样现场流程更直观，主持人不用自己说“这是几等奖”。

5.3 代码组织的建议

我建议先把所有代码放在一个文件里，方便分发。但随着功能变多，单文件会越来越臃肿，维护体验下降。这时候可以拆成三个文件：HTML、CSS、JavaScript，用普通的link和script标签引入。不需要上工程化，因为这种小页面没有构建需求。

如果反复用到这类工具，可以维护一个自己的轻量组件库，把解析名单、洗牌、定时滚动等功能写成独立函数，下次做转盘抽奖、点名器、随机分组器时直接复用。我在实际项目中就把解析名单和洗牌抽成了公共函数，后来做随机分组页时几乎没改代码，省了不少时间。

我个人在实际操作中的一个体会是：抽奖页面最怕的不是逻辑复杂，而是现场“不懂代码的人也要操作”。所以把按钮做得够大、文案写得够直白、重置流程够傻瓜，比任何炫技都重要。最后再分享一个小技巧：正式活动前，准备一份名单提前测试三轮，确认去重逻辑、中奖记录和大屏显示都没问题，再开始使用。这种小工具虽然简单，但“稳”字永远是第一位的。