去年公司年会，线抽行政部用了一个在线抽奖网页。奖网大屏幕上数字滚动的线抽时候，底下两百多号人盯着屏幕，奖网安静得能听见空调声。线抽结果出来那一刻，奖网中奖的线抽跳起来，没中的奖网骂两句，气氛比请个主持人上台念名单好太多。线抽后来我找行政要了那个网页的奖网源码，发现实现逻辑比想象的线抽简单得多。

核心就三步：一个数组存参与者名单，奖网一个定时器控制数字滚动，线抽一个随机函数决定谁中奖。奖网听起来像废话，线抽但真动手写的时候，坑都在细节里。

滚动效果怎么做才不卡

最粗暴的做法是每50毫秒换一次显示的名字。用setInterval就行，但有个问题——抽奖人数多的时候，DOM频繁更新会让页面发烫。我试过用requestAnimationFrame替代，效果差不多，但代码复杂了一截。后来干脆不改了，反正年会抽奖也就跑个十几秒，手机都扛得住。

真正要留意的是停止滚动的时机。不能直接clearInterval就完事，那样会突然定住，看着很生硬。我在停止前加了一个减速过程：每隔一次把间隔时间乘以1.2，让名字切换得越来越慢，最后自然停住。这个细节让整个抽奖过程有了“仪式感”，台下的人会跟着节奏紧张起来。

随机函数没那么随机

Math.random()返回的是伪随机数，但抽奖场景下够用了。真正要防的是重复中奖——如果一次抽多个奖项，得把已中奖的人从数组里剔除。我见过有人用splice直接改原数组，结果抽完一轮发现名单少了一半。正确做法是先复制一份数组再操作，或者用filter生成新数组。

还有个隐蔽的坑：如果参与者名单里有重名，抽奖结果会让人困惑。我们年会有两个“张伟”，行政在名单里写的是“张伟（技术部）”和“张伟（市场部）”。这种细节不提前处理，抽奖现场就是大型尴尬现场。

数据从哪来

最简单的方案是把名单硬编码在<script>标签里。但年会前总有人临时报名，改代码不现实。我后来改成从localStorage读名单，再配一个隐藏的输入框，行政自己粘贴名字进去。刷新页面数据还在，不用每次重新录。

如果要联网同步，用fetch拉一个JSON文件也行。但年会现场网络说不准，本地存储更稳。我甚至见过有人把名单写在URL参数里，比如?names=张三,李四,王五，简单粗暴，但名字多了链接会长得离谱。

视觉上别太花哨

我见过一个抽奖网页，背景是动态星空，中奖时还有烟花特效。好看是好看，但投影仪一投，颜色偏得亲妈都不认识。大屏幕抽奖最重要的是对比度——深色背景配亮色文字，字号至少80px，保证最后一排也能看清。

中奖结果展示别用弹窗。弹窗在大屏幕上会显得很小，而且需要手动关闭。更好的做法是让中奖名字直接替换掉滚动区域，加一个放大动画，停两秒后自动进入下一轮。整个过程不需要任何人操作鼠标。

一个真实的小事故

前年有个朋友公司抽奖，网页写着写着忘了处理“只剩一个人”的情况。最后一轮抽奖时，滚动区域一直显示同一个名字，台下以为卡住了。其实逻辑没错，但视觉上像死机。后来加了个判断：如果剩余人数等于中奖人数，直接跳过滚动，显示“剩余人员自动中奖”。这种边界情况不提前想好，现场就是事故。

在线抽奖网页的技术含量不高，但细节密度很大。从随机算法到DOM更新，从数据存储到投影适配，每个环节都可能出问题。写之前最好拿真实名单跑一遍，把“只剩一人”“重名”“网络断开”这些情况都试出来。毕竟年会一年就一次，抽奖卡住可比节目不好看严重多了。