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