簡介這是一份面向年會(huì)組織者和前端開發(fā)者的HTML抽獎(jiǎng)互動(dòng)源碼通過名字滾動(dòng)與閃爍效果實(shí)現(xiàn)現(xiàn)場抽獎(jiǎng)。每個(gè)獎(jiǎng)項(xiàng)獨(dú)立展示對應(yīng)獎(jiǎng)品未抽獎(jiǎng)時(shí)界面顯示抽獎(jiǎng)按鈕點(diǎn)擊后員工信息持續(xù)滾動(dòng)閃爍停止時(shí)提示中獎(jiǎng)用戶已抽獎(jiǎng)的獎(jiǎng)項(xiàng)則直接展示中獎(jiǎng)?wù)咝畔v史中獎(jiǎng)名單也可一并呈現(xiàn)。資源共18個(gè)文件壓縮包96.45MB核心文件包括兩個(gè)HTML頁面、配套CSS樣式、jQuery腳本以及多張PNG/JPG界面素材另附MP4效果演示和readme說明目錄結(jié)構(gòu)清晰下載解壓即可運(yùn)行或二次修改。目前已有3408人學(xué)習(xí)下載適合需要快速落地年會(huì)抽獎(jiǎng)場景、缺少前端方案或希望定制獎(jiǎng)項(xiàng)交互的讀者。通過源碼可掌握名字循環(huán)滾動(dòng)、閃爍高亮、隨機(jī)停止等常見抽獎(jiǎng)動(dòng)畫實(shí)現(xiàn)思路同時(shí)獲得一套可直接部署的完整界面與配套素材。1. 名字滾動(dòng)年會(huì)抽獎(jiǎng)一個(gè)HTML文件就能跑起來的現(xiàn)場互動(dòng)每年年會(huì)行政最頭疼的環(huán)節(jié)之一就是抽獎(jiǎng)。線上抽獎(jiǎng)工具看著專業(yè)真要現(xiàn)場用常常被網(wǎng)絡(luò)、賬號(hào)、插件折騰得夠嗆。與其賭平臺(tái)的穩(wěn)定性不如在本地放一個(gè)HTML文件雙擊打開名字高速滾動(dòng)再點(diǎn)一下幸運(yùn)兒定格——這就是名字滾動(dòng)年會(huì)抽獎(jiǎng)最樸素也最穩(wěn)的實(shí)現(xiàn)方式。整份源碼就是純前端的一個(gè)網(wǎng)頁沒有框架、沒有后端、沒有構(gòu)建步驟適合行政同學(xué)拿去直接改也適合前端新手用來練手和拆解。2. 滾動(dòng)抽獎(jiǎng)的核心原理定時(shí)器、隨機(jī)索引與刷新方式怎么選2.1 名字“滾”起來的本質(zhì)用定時(shí)器高頻切換顯示文本名字滾動(dòng)從視覺上看像動(dòng)畫實(shí)際上做起來比想象中簡單它不是一個(gè)平滑的位移動(dòng)畫而是“顯示某個(gè)名字→極短時(shí)間后再顯示另一個(gè)名字”的高速切換。人眼在切換頻率超過每秒十幾幀的時(shí)候就基本分辨不出單次切換只看到一個(gè)名字在“滾”。在瀏覽器里實(shí)現(xiàn)這種高頻切換最常見的手段是setInterval或者setTimeout鏈。每 50 毫秒換一次名一秒鐘就是 20 次視覺上已經(jīng)很連續(xù)了。第一次寫這個(gè)功能時(shí)我最初的直覺是用innerHTML去拼接一堆 HTML 標(biāo)簽其實(shí)完全沒必要純文本場景下textContent更快、更安全還能避免名字里帶尖括號(hào)時(shí)把頁面搞壞。// 假設(shè)名單長這樣 const names [張偉, 李娜, 王強(qiáng), 劉洋, 陳靜, 楊帆] // 每 50 毫秒換一個(gè)名字 let timer setInterval(() { const idx Math.floor(Math.random() * names.length) document.getElementById(display).textContent names[idx] }, 50)這段代碼里Math.floor(Math.random() * names.length)會(huì)得到 0 到names.length - 1之間的整數(shù)相當(dāng)于隨機(jī)挑一個(gè)下標(biāo)然后取出對應(yīng)的名字。setInterval的回調(diào)每 50 毫秒執(zhí)行一次就形成了滾動(dòng)。50 毫秒這個(gè)值不是拍腦袋定的實(shí)際體驗(yàn)里 50 到 80 毫秒比較舒服再慢就明顯看到名字一格格跳再快容易給人眩暈感現(xiàn)場大屏尤其明顯。這里有個(gè)隱藏問題直接Math.random()從整個(gè)名單里挑這套邏輯用到正式抽獎(jiǎng)時(shí)會(huì)導(dǎo)致已經(jīng)中過獎(jiǎng)的人再次被抽到。滾動(dòng)展示階段隨便點(diǎn)沒關(guān)系但最終的結(jié)果判定必須做去重這個(gè)留給 2.2 講。2.2 抽獎(jiǎng)公平性從哪來隨機(jī)索引與去重邏輯抽獎(jiǎng)最關(guān)鍵的一條是公平。把生成隨機(jī)數(shù)的代碼直接拿來用只能保證“每次隨機(jī)”不能保證“每個(gè)人都被抽過一輪后才開始下一輪”?，F(xiàn)場最常見的尷尬是抽完三等獎(jiǎng)二等獎(jiǎng)又抽到同一個(gè)人——運(yùn)氣好是雙方都笑運(yùn)氣差會(huì)有人當(dāng)場質(zhì)疑。解決思路很簡單維護(hù)一個(gè)“已中獎(jiǎng)”數(shù)組每次抽之前先把名單過濾掉這批人或者更直接把還沒中獎(jiǎng)的人單獨(dú)放一個(gè)池子里從中隨機(jī)取。const all [張偉, 李娜, 王強(qiáng), 劉洋, 陳靜, 楊帆] const winners [] function pickWinner() { const pool all.filter(name !winners.includes(name)) if (pool.length 0) { alert(所有人都中過獎(jiǎng)了) return null } const idx Math.floor(Math.random() * pool.length) const winner pool[idx] winners.push(winner) return winner }這個(gè)filter每抽一次就要遍歷一遍全名單人數(shù)在幾百以內(nèi)完全夠用。如果到了幾千人的規(guī)?？梢杂靡粋€(gè)Set來存已中獎(jiǎng)的人判斷時(shí)從 O(n) 變成 O(1)。這里我一般直接用數(shù)組理由很樸素年會(huì)名單再大也就幾百上千數(shù)組的性能開銷可以忽略但代碼讀起來最直觀行政同事想改也好改。去重之外還有一重考慮要不要把“滾動(dòng)過程”和“中獎(jiǎng)人判定”分開。我的做法是滾動(dòng)期間純隨機(jī)展示取悅眼睛停止時(shí)再從池子里真正抽一個(gè)保證公平。這個(gè)區(qū)分是很多寫得擁擠的源碼最容易搞混的地方——滾動(dòng)時(shí)把結(jié)果直接加到中獎(jiǎng)數(shù)組里然后才發(fā)現(xiàn)前面滾動(dòng)的名字其實(shí)只是動(dòng)畫壓根沒存下來。2.3 三種渲染方式的取舍t(yī)extContent、innerHTML 與 CSS 過渡確定了滾動(dòng)頻率和隨機(jī)邏輯下一個(gè)問題是每次切換名字時(shí)用哪種方式把新名字畫到屏幕上。最常見的三種寫法textContent直接改文本節(jié)點(diǎn)安全、快不會(huì)觸發(fā) HTML 解析。innerHTML能改文本也能插標(biāo)簽但對“純文本”場景是浪費(fèi)而且如果名字里出現(xiàn)、會(huì)被當(dāng)成標(biāo)簽解析輕則樣式破掉重則頁面報(bào)錯(cuò)。先改opacity或transform等 CSS 過渡跑完再換文本視覺柔和一些但要處理定時(shí)器和過渡回調(diào)的配合偶爾會(huì)出現(xiàn)“名字還沒換完動(dòng)畫就停了”的尷尬。// 推薦的寫法用 textContent 改文本配合 CSS 的過渡做透明度淡入淡出 const display document.getElementById(display) const nextIdx Math.floor(Math.random() * names.length) // 先隱藏、再換名、再顯示 display.style.opacity 0 setTimeout(() { display.textContent names[nextIdx] display.style.opacity 1 }, 30)這里把opacity從 1 變成 0再變回 1如果 CSS 里寫了transition: opacity 0.08s就能讓每次換名之間有一點(diǎn)淡入淡出的感覺視覺上比硬切柔和。代價(jià)是代碼多了一個(gè)setTimeout而且 30 毫秒這個(gè)延遲需要和 CSS 的過渡時(shí)間匹配。如果過渡寫得太長名字切換會(huì)明顯變慢寫得太短又看不出效果。我的選擇是最小可用版本直接用textContent硬切把滾動(dòng)的頻率調(diào)快一點(diǎn)視覺接受度已經(jīng)很高。淡入淡出屬于加分項(xiàng)放在第 6 章再講怎么優(yōu)雅地加。注意textContent和innerHTML在性能上也有差別。innerHTML每次賦值都會(huì)經(jīng)過 HTML 解析器哪怕內(nèi)容里沒有標(biāo)簽也要走一遍流程textContent直接改文本節(jié)點(diǎn)開銷更低。頻繁切換時(shí)這個(gè)差距會(huì)被放大。3. 手寫一個(gè)可運(yùn)行的抽獎(jiǎng)頁面HTML/CSS/JS 源碼與參數(shù)拆解這一章給出一份能直接保存成.html文件、雙擊就能跑的完整源碼也是典型的 HTML 網(wǎng)頁制作場景結(jié)構(gòu)、表現(xiàn)、行為都在一個(gè)文件里。代碼按 HTML/CSS/JS 三個(gè)部分展開每段都是完整文件里的實(shí)際內(nèi)容組合起來就能跑。3.1 HTML 骨架顯示區(qū)、按鈕和狀態(tài)提示先看結(jié)構(gòu)部分。頁面上需要三樣?xùn)|西最顯眼的“當(dāng)前名字”大盒子、控制開始和停止的按鈕、以及一個(gè)告訴操作者“當(dāng)前是滾動(dòng)中還是已出結(jié)果”的狀態(tài)文字。!DOCTYPE html html langzh-CN head meta charsetUTF-8 title年會(huì)名字滾動(dòng)抽獎(jiǎng)/title style /* 在此粘貼 3.2 的 CSS */ /style /head body div classcontainer h1 classtitle年會(huì)抽獎(jiǎng)/h1 div classdisplay-box iddisplay點(diǎn)擊開始/div p classstatus idstatus共 6 人參與已有 0 人中獎(jiǎng)/p div classcontrols button idbtnStart classbtn btn-primary開始/button button idbtnReset classbtn btn-secondary重置/button /div /div script // 在此粘貼 3.3 的 JavaScript /script /body /html這里id是 JS 操作的入口display是名字展示區(qū)status是動(dòng)態(tài)變化的提示文字兩個(gè)按鈕分別綁定開始/停止和重置。把按鈕設(shè)計(jì)成這樣是為了現(xiàn)場一個(gè)按鈕就能完成“開始→停止”兩步不需要操作者反應(yīng)重置按鈕則放在旁邊作為后悔藥防止抽錯(cuò)以后只能干瞪眼。3.2 CSS 大屏適配居中布局與字號(hào)策略年會(huì)抽獎(jiǎng)八成要投到大屏上布局上最省心的是讓整個(gè)頁面居中再用視口單位控制字號(hào)。桌面開發(fā)習(xí)慣用px但大屏上分辨率差異很大投影儀 1024×768 和會(huì)議室電視 3840×2160 都可能出現(xiàn)用px就得準(zhǔn)備兩套方案麻煩。* { box-sizing: border-box; margin: 0; padding: 0; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); font-family: Microsoft YaHei, PingFang SC, sans-serif; } .container { text-align: center; width: 80vw; } .display-box { min-height: 24vh; display: flex; align-items: center; justify-content: center; font-size: clamp(48px, 10vh, 160px); font-weight: bold; color: #f5c542; background: rgba(255, 255, 255, 0.06); border: 2px solid rgba(255, 255, 255, 0.25); border-radius: 24px; padding: 4vh 4vw; transition: opacity 0.08s ease; }幾個(gè)關(guān)鍵參數(shù)說明min-height: 24vh顯示區(qū)高度按視口高度的 24% 取保證屏幕上下都有足夠留白名字不會(huì)貼到邊。font-size: clamp(48px, 10vh, 160px)字號(hào)隨視口高度變化但限制在 48px 到 160px 之間。10vh 的意思是取視口高度的 10% 作為文字大小投影儀和電視都能自適應(yīng)。background用半透明白色疊加深色漸變既突出文字又不會(huì)讓白底黑字在燈光下刺眼。transition: opacity 0.08s ease這個(gè)和 2.3 說的淡入淡出對應(yīng)0.08 秒是 80 毫秒比滾動(dòng)間隔稍長一點(diǎn)點(diǎn)視覺上比較舒服。按鈕的樣式這里也一并給出注意.btn的公共樣式和兩個(gè)按鈕的顏色區(qū)分.btn { min-width: 160px; margin: 0 12px; padding: 14px 32px; font-size: 28px; border: none; border-radius: 12px; cursor: pointer; color: #fff; transition: transform 0.1s ease; } .btn:active { transform: scale(0.95); } .btn-primary { background: #e94560; } .btn-secondary { background: #533483; } .btn:disabled { opacity: 0.5; cursor: not-allowed; }transform: scale(0.95)是按下時(shí)把按鈕縮小 5%松開恢復(fù)現(xiàn)場用投影儀時(shí)這個(gè)細(xì)微反饋很重要操作者能從畫面上確認(rèn)“我真的按下去了”。禁用態(tài):disabled用于防止抽獎(jiǎng)過程中重復(fù)點(diǎn)擊——這個(gè)問題在 5.5 會(huì)展開講。3.3 JavaScript 控制流開始、停止、結(jié)果判定與重置控制邏輯是整份源碼的心臟。我把它拆成四個(gè)狀態(tài)空閑、滾動(dòng)中、已出結(jié)果、已重置。用rolling這個(gè)布爾值記狀態(tài)避免用戶狂點(diǎn)按鈕導(dǎo)致定時(shí)器疊加。const names [張偉, 李娜, 王強(qiáng), 劉洋, 陳靜, 楊帆] const display document.getElementById(display) const statusEl document.getElementById(status) const btnStart document.getElementById(btnStart) const btnReset document.getElementById(btnReset) let timer null let rolling false let currentName const winners [] function updateStatus() { statusEl.textContent 共 ${names.length} 人參與已有 ${winners.length} 人中獎(jiǎng) } function rollOnce() { const idx Math.floor(Math.random() * names.length) currentName names[idx] display.textContent currentName } function startRoll() { if (rolling) return rolling true btnStart.textContent 停止 timer setInterval(rollOnce, 60) } function stopRoll() { if (!rolling) return clearInterval(timer) timer null // 從未中獎(jiǎng)池子里抽一個(gè) const pool names.filter(name !winners.includes(name)) if (pool.length 0) { alert(所有人都中過獎(jiǎng)了) resetGame() return } const winner pool[Math.floor(Math.random() * pool.length)] winners.push(winner) display.textContent winner rolling false btnStart.textContent 開始 updateStatus() } function resetGame() { clearInterval(timer) timer null rolling false winners.length 0 display.textContent 點(diǎn)擊開始 btnStart.textContent 開始 updateStatus() } btnStart.addEventListener(click, () { if (rolling) stopRoll() else startRoll() }) btnReset.addEventListener(click, resetGame)邏輯說明開始按鈕的點(diǎn)擊事件里做了一個(gè)三目判斷——滾動(dòng)中點(diǎn)擊就停止空閑時(shí)點(diǎn)擊就開始。這個(gè)交互參考了主流抽獎(jiǎng)頁面的習(xí)慣一個(gè)大按鈕負(fù)責(zé)“開始/停止”減少現(xiàn)場操作者第二步思考。stopRoll里無論如何都先把setInterval清掉再用過濾出的pool隨機(jī)取人確保最終被定格的人一定不是已中獎(jiǎng)的。winners.length 0這樣重置數(shù)組是故意的它比winners []更省事因?yàn)閣inners聲明為const重新賦值會(huì)直接報(bào)錯(cuò)。參數(shù)說明這里的核心調(diào)參點(diǎn)有三個(gè)——60是滾動(dòng)間隔毫秒數(shù)names是名單數(shù)組winners數(shù)組的長度決定狀態(tài)提示里的“已有 X 人中獎(jiǎng)”。如果年會(huì)分三等獎(jiǎng)、二等獎(jiǎng)、一等獎(jiǎng)多輪抽獎(jiǎng)可以不做重置讓winners一直累積每輪只抽剩下的人這就是 4.3 要說的內(nèi)容。4. 把名單換成自己公司的數(shù)據(jù)接入與現(xiàn)場微調(diào)4.1 從硬編碼數(shù)組到文本框粘貼臨時(shí)加減人怎么處理第 3 章的源碼里名單寫死在names這個(gè)數(shù)組里。實(shí)際年會(huì)現(xiàn)場名單的變動(dòng)往往發(fā)生在最后一天甚至開場前半小時(shí)有人請假了、領(lǐng)導(dǎo)臨時(shí)帶了個(gè)嘉賓、新入職的同事漏報(bào)了。這時(shí)候再回頭改 JS 數(shù)組雖然也能改但對不熟悉代碼的人來說打開文件看到一堆const names [...]容易看懵。一個(gè)常見的做法是在頁面里放一個(gè)textarea讓操作者可以把名單整段粘進(jìn)去用換行或者逗號(hào)分隔點(diǎn)一下按鈕就能加載新名單。這樣做還有一個(gè)好處名單可以直接從 Excel 里整列復(fù)制出來不用手動(dòng)加引號(hào)和逗號(hào)。textarea idnameInput rows4 placeholder每行一個(gè)名字例如#10;張偉#10;李娜#10;王強(qiáng)/textarea button idbtnLoad加載名單/buttonconst btnLoad document.getElementById(btnLoad) const nameInput document.getElementById(nameInput) btnLoad.addEventListener(click, () { resetGame() // 加載前先停掉滾動(dòng)狀態(tài) const raw nameInput.value.trim() if (!raw) { alert(名單不能為空) return } const newNames raw.split(/\n|,|/).map(s s.trim()).filter(Boolean) if (newNames.length 2) { alert(請至少輸入兩個(gè)名字) return } names.length 0 names.push(...newNames) winners.length 0 display.textContent 點(diǎn)擊開始 btnStart.textContent 開始 updateStatus() })這段代碼做了兩件關(guān)鍵的事把文本框里的內(nèi)容按換行、英文逗號(hào)或中文逗號(hào)拆開去掉首尾空格和空行然后原地更新names數(shù)組。names.length 0清空后用push(...newNames)把新名單填進(jìn)去整個(gè)names的引用沒有變所以前面 2.2 里的filter也不需要改。一個(gè)很容易忽略的細(xì)節(jié)是加載前先調(diào)用resetGame()。如果加載時(shí)正處于滾動(dòng)中不重置就開始加載會(huì)產(chǎn)生一個(gè)已經(jīng)“滾了一半”的定時(shí)器舊名單和新名單混在一起現(xiàn)場很難馬上看出來。把resetGame()放在點(diǎn)擊事件第一行這個(gè)邊界問題就消掉了。4.2 調(diào)參指南滾動(dòng)速度、顯示字號(hào)、中獎(jiǎng)人數(shù)一個(gè)項(xiàng)目能給別人用的前提是參數(shù)可調(diào)。第 3 章的完整源碼里散落著幾個(gè)敏感數(shù)字把它們集中到腳本頂部后續(xù)維護(hù)會(huì)省心很多。// ☆ 現(xiàn)場可調(diào)參數(shù)區(qū) ☆ const CONFIG { interval: 60 // 滾動(dòng)間隔(毫秒)越小滾動(dòng)越快建議 40~100 }把interval從 60 毫秒改成 40 毫秒名字切換會(huì)明顯更“躁”年會(huì)現(xiàn)場更嗨改成 100 毫秒以上就是緩和版。字號(hào)在 3.2 已經(jīng)用clamp(48px, 10vh, 160px)處理了高度小于 480px 的屏幕會(huì)穩(wěn)定在 48px大于 1600px 的屏幕也不會(huì)超出 160px。這兩個(gè)值一般不需要再動(dòng)真覺得字不夠大把10vh改成12vh即可。中獎(jiǎng)人數(shù)這個(gè)參數(shù)我的建議是不做成年會(huì)抽獎(jiǎng)“一次抽多個(gè)”的復(fù)雜邏輯?，F(xiàn)場更常見的需求是一輪抽一個(gè)人連續(xù)抽多輪所以winners數(shù)組不斷累積反而是最自然的設(shè)計(jì)。如果你確實(shí)遇到“一次抽 5 個(gè)人”的需求最穩(wěn)的寫法是從池子里抽 5 個(gè)不重復(fù)的然后一次性渲染到屏幕上function pickMultiple(count) { const pool names.filter(name !winners.includes(name)) if (pool.length count) { alert(剩余人數(shù)不足) return [] } const picked [] const temp pool.slice() for (let i 0; i count; i) { const idx Math.floor(Math.random() * temp.length) picked.push(temp[idx]) temp.splice(idx, 1) } return picked }這是典型的“不放回抽樣”先把池子復(fù)制一份每抽一個(gè)人就把它從臨時(shí)數(shù)組里刪掉保證同一次抽獎(jiǎng)內(nèi)不會(huì)重復(fù)。抽完后統(tǒng)一把picked里的名字加到winners里不要抽一個(gè)加一個(gè)否則狀態(tài)會(huì)亂。4.3 多輪抽獎(jiǎng)與已中獎(jiǎng)隔離一個(gè)數(shù)組狀態(tài)是怎么維護(hù)的多輪抽獎(jiǎng)聽起來復(fù)雜其實(shí)只要維護(hù)好兩個(gè)數(shù)組的狀態(tài)就夠一個(gè)是全員名單names一個(gè)是已中獎(jiǎng)winners。每次抽獎(jiǎng)只從“不在 winners 里的那些人”中間選中獎(jiǎng)后把名字推進(jìn)winners。這樣不用做“把中獎(jiǎng)人從原始名單刪除”的操作重置時(shí)把winners.length清空就行名單始終是原樣只是查詢時(shí)做過濾。這個(gè)方案的取舍在于如果年會(huì)要抽 400 人里的 100 個(gè)獎(jiǎng)每輪都做一次filter每輪 O(n) 的遍歷絕大多數(shù)瀏覽器都能扛住用戶無感。如果確實(shí)到了幾千人的規(guī)模可以把winners換成Setconst winnersSet new Set() function stopRollWithSet() { const pool names.filter(name !winnersSet.has(name)) // 其余邏輯與 stopRoll 一樣 }但這里我不建議一上來就用Set因?yàn)樾姓瑢W(xué)可能還要在瀏覽器控制臺(tái)里看winners數(shù)組、核對是不是漏了人數(shù)組打印出來比Set直觀得多。等到真有性能壓力再改成Set也不遲。另外一個(gè)容易被忽略的小細(xì)節(jié)重置按鈕的語義。年會(huì)里“重置”不只是清空中獎(jiǎng)名單還要把狀態(tài)文字、按鈕文字和顯示區(qū)都恢復(fù)原樣。重置按鈕放在開始按鈕旁邊是為了給人一個(gè)后悔藥——抽錯(cuò)人了點(diǎn)重置一切從頭來。這也是我在 3.1 特意保留兩個(gè)按鈕而不是只留一個(gè)大按鈕的原因。5. 年會(huì)現(xiàn)場不要翻車5 個(gè)高頻坑與排查辦法這一章寫的是真實(shí)現(xiàn)場最容易踩的坑每一條我都按“現(xiàn)象→原因→解決”的方式講方便出問題時(shí)按圖索驥。5.1 現(xiàn)象名字滾動(dòng)時(shí)明顯掉幀大屏上一卡一卡的現(xiàn)象是名字切換不連貫有撕裂感甚至整個(gè)頁面無響應(yīng)。原因一般有兩個(gè)一是電腦太老播放 4K 視頻都費(fèi)勁還要跑瀏覽器二是滾動(dòng)間隔設(shè)得太短比如 20 毫秒加上 CSS 過渡里的opacity和陰影渲染壓力變大。還有就是后臺(tái)開著直播軟件CPU 被打滿。解決的辦法先把CONFIG.interval從 40 提到 80視覺影響不大但負(fù)載明顯下降然后去掉display-box的陰影純色背景最省資源最后關(guān)閉其他占用高的程序。如果還卡換一臺(tái)電腦比任何優(yōu)化都立竿見影——年會(huì)現(xiàn)場電腦性能比前端優(yōu)化更關(guān)鍵。5.2 現(xiàn)象停止后抽到已經(jīng)中過獎(jiǎng)的人這幾乎是新手源碼翻車率最高的一條。原因在于停止時(shí)用的是滾動(dòng)過程中的currentName而不是“從剩余人里重新抽”。我在第 2 章就強(qiáng)調(diào)了滾動(dòng)展示和結(jié)果判定必須分開這里再補(bǔ)一個(gè)排查辦法打開瀏覽器控制臺(tái)輸入winners看數(shù)組里到底有沒有存結(jié)果。如果winners是空的說明停止邏輯根本沒走數(shù)據(jù)更新問題在stopRoll里。解決也是這套把stopRoll里“先清定時(shí)器、再 filter 抽人、最后寫回 display”的順序固定死。清定時(shí)器永遠(yuǎn)在第一步不要等結(jié)果算完再清否則這 60 毫秒里定時(shí)器還會(huì)偷跑一次把畫面換到別的名字上。5.3 現(xiàn)象中文名顯示成亂碼或問號(hào)現(xiàn)象是頁面上名字變成“錕斤拷”或者一串問號(hào)。原因幾乎都是編碼問題HTML 文件保存時(shí)沒有用 UTF-8或者meta標(biāo)簽和文件實(shí)際編碼不一致。解決用 VS Code 或 Notepad 打開文件另存為時(shí)選擇 UTF-8 編碼確認(rèn)頭部有meta charsetUTF-8。這里有個(gè)細(xì)節(jié)有些 Windows 老版本記事本會(huì)把文件存成 GBK再把meta寫成 UTF-8就會(huì)出亂碼。最好的辦法是統(tǒng)一用現(xiàn)代編輯器保存不要用系統(tǒng)自帶記事本。5.4 現(xiàn)象雙擊 HTML 文件打不開或者打開后按鈕點(diǎn)了沒反應(yīng)打不開的原因常見有兩種文件被系統(tǒng)當(dāng)成默認(rèn)用記事本打開了——右鍵選擇“打開方式→瀏覽器”即可或者是瀏覽器安全策略攔了本地腳本這種情況多見于某些國產(chǎn)瀏覽器的“極速模式”。按鈕點(diǎn)了沒反應(yīng)先按 F12 打開控制臺(tái)看有沒有紅色的報(bào)錯(cuò)信息。最常見的報(bào)錯(cuò)是Cannot read properties of null意思是某個(gè)getElementById沒找到元素。原因多半是 HTML 里id寫錯(cuò)了或者script放在了body前面導(dǎo)致腳本執(zhí)行時(shí)元素還不存在。解決辦法很簡單把script放到/body之前或者用DOMContentLoaded包一層。5.5 現(xiàn)象按鈕連點(diǎn)導(dǎo)致邏輯錯(cuò)亂抽獎(jiǎng)結(jié)果和畫面不一致現(xiàn)場操作者緊張時(shí)會(huì)快速連點(diǎn)開始/停止以前的代碼如果只用timer是否為空來判斷狀態(tài)就會(huì)出現(xiàn)第一次點(diǎn)擊啟了定時(shí)器第二次點(diǎn)擊清掉第三次點(diǎn)擊又啟一個(gè)但此時(shí)另一個(gè)定時(shí)器還沒清干凈兩個(gè)定時(shí)器同時(shí)跑結(jié)果越來越亂。解決用獨(dú)立的rolling布爾值做閘門startRoll里if (rolling) returnstopRoll里if (!rolling) return并且兩個(gè)函數(shù)入口先把timer清干凈。這是 3.3 源碼里已經(jīng)寫過的方式。另外按鈕的disabled也可以在滾動(dòng)期間禁用不過年會(huì)現(xiàn)場禁用按鈕反而會(huì)讓操作者困惑“怎么點(diǎn)了沒反應(yīng)”所以我更偏向用邏輯閘門而不是禁用按鈕。6. 增強(qiáng)體驗(yàn)的兩個(gè)小技巧與公平性驗(yàn)證6.1 用控制臺(tái)快速驗(yàn)證隨機(jī)分布寫完后怎么確認(rèn)這個(gè)抽獎(jiǎng)沒有黑幕最簡單的方法是用控制臺(tái)跑一個(gè)分布測試。把names換成 100 個(gè)數(shù)字模擬抽 10 萬次看每個(gè)名字被抽到的次數(shù)是否接近均勻。const testNames Array.from({ length: 100 }, (_, i) P${i}) const counter new Array(100).fill(0) for (let i 0; i 100000; i) { const idx Math.floor(Math.random() * testNames.length) counter[idx] } console.log(最低次數(shù):, Math.min(...counter)) console.log(最高次數(shù):, Math.max(...counter))如果最低和最高之間的差異在 5% 以內(nèi)說明Math.random()的分布基本可靠。這個(gè)驗(yàn)證每次做完抽獎(jiǎng)頁我都會(huì)跑一遍能排除自己寫錯(cuò)隨機(jī)索引的可能。6.2 給滾動(dòng)加一個(gè)“減速?！钡男〖记赡陼?huì)現(xiàn)場最有儀式感的瞬間是主持人喊“?！敝罂粗致ㄏ聛?。默認(rèn)的setInterval一停就是硬停沒有“減速”的感覺。一個(gè)低成本的做法停止時(shí)把setInterval換成鏈?zhǔn)絪etTimeout讓延遲逐次變長模擬減速。function stopRollWithDecel() { clearInterval(timer) let delay 80 const decelerate () { delay 70 if (delay 700) { finishPick() // 復(fù)用 3.3 里的抽獎(jiǎng)判定邏輯 return } rollOnce() setTimeout(decelerate, delay) } setTimeout(decelerate, delay) }核心思路是把固定 60 毫秒的間隔改為動(dòng)態(tài)遞增第一次觸發(fā)在 80 毫秒后第二次 150 毫秒第三次 220 毫秒……名字切換就從“高頻跳動(dòng)”慢慢變成“一格格滑動(dòng)”最后停在某個(gè)人身上。真正的獲獎(jiǎng)?wù)哌€是在finishPick里走pool過濾后抽取畫面定格的人只承擔(dān)視覺結(jié)果。去年用這個(gè)方式做過年會(huì)效果比硬停熱鬧很多。但也要提醒減速過程太長會(huì)冷場從 80 毫秒加到 600 毫秒左右就行總時(shí)長控制在 4 秒內(nèi)。說到底名字滾動(dòng)年會(huì)抽獎(jiǎng)這個(gè) HTML 源碼核心就這么點(diǎn)事一個(gè)定時(shí)器、一個(gè)隨機(jī)數(shù)、一個(gè)數(shù)組去重。技術(shù)難度不高真正的價(jià)值在于把它做到“現(xiàn)場可用”而不是“演示可用”。我的習(xí)慣是發(fā)布前一天一定用活動(dòng)的真實(shí)名單在目標(biāo)電腦上跑一遍按下停止確認(rèn)名字能正常定格再把名單臨時(shí)改成兩個(gè)人測試重復(fù)抽獎(jiǎng)會(huì)不會(huì)觸發(fā)“所有人都中過獎(jiǎng)”的提示。這兩個(gè)小動(dòng)作比任何代碼審查都更能保證年會(huì)當(dāng)天不出狀況。希望這篇實(shí)操記錄能幫到你下次年會(huì)別被這個(gè)環(huán)節(jié)難住。本文還有配套的精品資源點(diǎn)擊獲取