簡介這份資源提供了一套基于JavaScript的手機(jī)號批量滾動抽獎實(shí)現(xiàn)代碼面向需要為年會、晚會或選秀類活動制作現(xiàn)場抽獎環(huán)節(jié)的前端開發(fā)者與活動策劃人員。核心解決隨機(jī)抽取且不重復(fù)、定時器驅(qū)動滾動展示、中獎人數(shù)可控等實(shí)際問題適合具備基礎(chǔ)JS與DOM操作能力的讀者參考。資源包共1個文件為PDF格式大小約56KB內(nèi)容以代碼講解與實(shí)現(xiàn)思路為主便于快速閱讀和對照實(shí)踐。目前已有368人學(xué)習(xí)下載。讀者可從中獲取隨機(jī)索引生成、已選號碼去重、setInterval滾動刷新、中獎人數(shù)控制以及與后臺通信的完整實(shí)現(xiàn)邏輯并附有HTML界面結(jié)構(gòu)示例涵蓋獎項(xiàng)等級、中獎人數(shù)與金額設(shè)置等交互細(xì)節(jié)有助于理解抽獎程序從原理到落地的關(guān)鍵環(huán)節(jié)并在此基礎(chǔ)上擴(kuò)展動畫效果與安全校驗(yàn)。1. 年會大屏抽獎翻車之后我拆了一份 js 手機(jī)號批量滾動抽獎實(shí)現(xiàn)代碼年會前一周行政把抽獎環(huán)節(jié)甩給我說“就大屏滾手機(jī)號主持人喊停就出結(jié)果”。我第一反應(yīng)是找個現(xiàn)成的 js 手機(jī)號批量滾動抽獎實(shí)現(xiàn)代碼改改結(jié)果搜出來的東西要么是單號碼輪盤要么是抽完不防重彩排時同一個工號連出三次臺下哄笑我后背全是汗。后來拿到這份代碼包通讀一遍發(fā)現(xiàn)它把“隨機(jī) 不重復(fù) 定時器滾動 人數(shù)控制”四件事串成了一條完整鏈路還帶了獎等、金額、回車鍵控制這些現(xiàn)場細(xì)節(jié)屬于能直接搬上年會大屏的那種。它適合兩類人一類是前端基礎(chǔ)一般、但需要在活動前快速交付一個可用抽獎頁的開發(fā)者另一類是想搞懂“批量滾動抽獎”背后索引隨機(jī)化邏輯、避免現(xiàn)場翻車的熟手。下面我按自己復(fù)現(xiàn)和改造的順序把這份 js 手機(jī)號批量抽獎代碼拆開講重點(diǎn)放在參數(shù)怎么調(diào)、坑在哪、后臺怎么接。2. 拆開代碼包DOM 結(jié)構(gòu)、樣式與抽獎數(shù)據(jù)源怎么對上這份代碼不是純 JS 片段而是一個完整 HTML 頁面結(jié)構(gòu)上分成三層背景與獎等展示層、號碼滾動列表層、底部設(shè)置層。理解這三層怎么對應(yīng)是后面改人數(shù)、改號碼池的前提。2.1 頁面骨架與關(guān)鍵 class 的職責(zé)先看 DOM 主干我把和抽獎邏輯強(qiáng)相關(guān)的節(jié)點(diǎn)標(biāo)出來div classprize_con p classprize_gradespan開始抽獎/span i0/i元/p div classprize_list vetically ul li000000/li !-- 共 10 個占位 li -- /ul /div p classstartimg srcimages/prize_start.png alt/p ul classprize_set li classset_grade獎等 select idset_grade option選擇獎等/option option特等獎/option option一等獎/option option二等獎/option option三等獎/option /select /li li classset_people人數(shù)input typetel placeholder輸入中獎人數(shù) idprizeCount/li li classset_money金額input typetel placeholder輸入中獎金額 idprizeMoney/li /ul /div input typehidden value0 idprize_btn.prize_list ul是滾動號碼的容器初始 10 個li只是占位真正顯示什么由showRandomNum決定。.start是開始/停止按鈕它內(nèi)部img的src會在prize_start.png和prize_stop.png之間切換這是現(xiàn)場主持人視覺反饋的關(guān)鍵。#prize_btn這個隱藏 input 是狀態(tài)鎖0表示未開始、1表示滾動中所有點(diǎn)擊邏輯都先讀它。#set_grade、#prizeCount、#prizeMoney三個控件分別控制獎等文案、單次中獎人數(shù)、獎金額。樣式里有兩個點(diǎn)值得注意。.prize_list設(shè)了width:55%; height:350px; overflow:hidden意味著號碼列表區(qū)域是固定高度裁切的如果你把單次人數(shù)從 10 改成 20li會換行但可能被裁掉需要同步調(diào)高度或字號。.prize_list li的width:20%配合font-size:0的父級ul是經(jīng)典的 inline-block 五列布局10 個號碼正好兩行。改人數(shù)時這個寬度百分比要跟著算否則會擠成一行或錯位。2.2 號碼池 code 數(shù)組與索引隨機(jī)化代碼里號碼池是一個硬編碼數(shù)組var code [302610,210022,159862,158602,145635,856997,586223,546221,145213,987451, 251364,854136,581698,123785,521387,752169,718954,412321,898989,121245, 788565,458558,589659,455212,964632,458412,223344,112233,335566,778899];這里用的是 6 位邀請碼不是真實(shí)手機(jī)號但原理完全一樣。核心函數(shù)showRandomNum(num)做了一件很聰明的事它不直接對code數(shù)組洗牌而是先生成一個和code等長的索引數(shù)組arr對arr做隨機(jī)排序再取前num個索引去映射code。function showRandomNum(num) { var li ; for (var i 0; i code.length; i) { arr[i] i; } arr.sort(function () { return 0.5 - Math.random(); }); for (var i 0; i num; i) { var index arr[i]; li li code[index] /li; } $(.prize_list ul).html(li); }邏輯說明arr每次調(diào)用都重新填充為[0,1,2,...,code.length-1]然后sort傳入一個返回0.5 - Math.random()的比較函數(shù)。這個寫法在中小規(guī)模數(shù)組上能打亂順序取前num個索引天然不重復(fù)因?yàn)樗饕旧韥碜酝粋€不重復(fù)序列。參數(shù)num就是當(dāng)前要展示的號碼個數(shù)由#prizeCount的輸入值傳入。這里有個隱含邊界如果num大于code.lengtharr[i]會越界得到undefined頁面會出現(xiàn)空白li所以人數(shù)上限必須小于號碼池長度。提示arr.sort這種隨機(jī)比較函數(shù)在超大數(shù)組比如幾萬條上分布并不均勻且性能一般。年會級別幾百到幾千個號碼完全夠用但如果號碼池上萬建議換成 Fisher-Yates 洗牌后面第 5 章會給替換寫法。2.3 定時器滾動與開始/停止?fàn)顟B(tài)機(jī)點(diǎn)擊.start后的邏輯是一個典型的狀態(tài)機(jī)靠#prize_btn的值切換$(.start).click(function () { if ($(#prize_btn).val() 0) { // 校驗(yàn)獎等、人數(shù)、金額 if ($(#set_grade).val() 選擇獎等) { alert(請選擇獎等); return; } else if ($(#prizeCount).val() ) { alert(請輸入中獎人數(shù)); return; } else if ($(#prizeCount).val() 10) { alert(單次抽獎人數(shù)不能超過10人); return; } else if ($(#prizeMoney).val() ) { alert(請輸入中獎金額); return; } else { $(#prize_btn).val(1); var num $(#prizeCount).val(); $(this).find(img).attr(src, images/prize_stop.png); myNumber setInterval(function () { showRandomNum(num); }, 30); } } else { $(#prize_btn).val(0); clearInterval(myNumber); $(this).find(img).attr(src, images/prize_start.png); } });邏輯說明第一次點(diǎn)擊進(jìn)入if分支做四項(xiàng)校驗(yàn)全部通過后把狀態(tài)鎖置1按鈕圖換成“停止”啟動setInterval每 30 毫秒調(diào)一次showRandomNum(num)形成號碼快速滾動的視覺。第二次點(diǎn)擊進(jìn)入else分支狀態(tài)鎖歸0clearInterval停掉定時器按鈕圖換回“開始”。參數(shù)30是滾動幀間隔單位毫秒數(shù)值越小滾動越快、CPU 占用越高現(xiàn)場大屏一般 30 到 50 都合適低于 20 在低配電腦上會卡頓。回車鍵控制是現(xiàn)場主持人的剛需代碼里綁了keydown$(document).keydown(function (event) { var e event || window.event || arguments.callee.caller.arguments[0]; if (e e.keyCode 13) { $(.start).click(); } });這樣主持人不用去點(diǎn)鼠標(biāo)按回車就能開始和停止彩排時這個細(xì)節(jié)能省很多事。獎等和金額的聯(lián)動也在$(function(){})里#set_grade的change事件把選中值寫進(jìn).prize_grade span#prizeMoney的keyup把輸入值寫進(jìn).prize_grade i大屏頂部就會實(shí)時顯示“特等獎 5000元”這樣的文案。3. 把代碼跑起來本地復(fù)現(xiàn)、號碼池替換與后臺對接拿到一份抽獎代碼最怕的是“看起來能跑一換數(shù)據(jù)就崩”。這一章按我實(shí)際復(fù)現(xiàn)的順序從目錄結(jié)構(gòu)到號碼池替換再到和后臺的邊界劃分一步步來。3.1 目錄結(jié)構(gòu)與本地啟動這份代碼依賴 jQuery頁面里引的是js/jquery.min.js背景圖在images/firstp_bg.jpg按鈕圖在images/prize_start.png和images/prize_stop.png。一個能跑的最小目錄長這樣draw/ ├── index.html ├── js/ │ └── jquery.min.js └── images/ ├── firstp_bg.jpg ├── prize_start.png └── prize_stop.png把index.html里的抽獎腳本原樣放進(jìn)去雙擊打開就能看到大屏效果。如果圖片缺失頁面不會報錯只是背景和按鈕空白抽獎邏輯照常運(yùn)行所以彩排前一定要確認(rèn)三張圖都在。jQuery 版本沒有硬性要求1.x 到 3.x 都能跑因?yàn)橛玫降闹挥?、click、change、keyup、html、attr、val這些基礎(chǔ) API。本地驗(yàn)證時我一般會先把setInterval的間隔從 30 改成 300讓滾動變慢肉眼確認(rèn)每次showRandomNum出來的號碼確實(shí)不重復(fù)再改回 30 上大屏。這個“慢速驗(yàn)證”習(xí)慣幫我抓過好幾次索引越界和重復(fù)問題。3.2 號碼池替換從硬編碼到接口拉取硬編碼code數(shù)組只適合演示真實(shí)活動號碼來自報名表或投票系統(tǒng)。常見做法是把號碼池?fù)Q成一個接口返回的數(shù)組。假設(shè)后臺提供一個返回 JSON 的地址前端可以這樣改var code []; function loadCodes(callback) { $.getJSON(/api/draw/codes, function (res) { // res 約定為 { data: [302610, 210022, ...] } if (res res.data res.data.length 0) { code res.data; callback callback(); } else { alert(號碼池為空請檢查后臺數(shù)據(jù)); } }); } $(function () { loadCodes(function () { console.log(號碼池加載完成共 code.length 條); }); });邏輯說明loadCodes在頁面初始化時拉取號碼池成功后再允許抽獎。參數(shù)方面接口返回的data必須是字符串或數(shù)字?jǐn)?shù)組長度至少大于單次最大中獎人數(shù)。這里有個容易忽略的點(diǎn)showRandomNum里arr的長度依賴code.length如果接口是異步的用戶可能在號碼池還沒回來時就點(diǎn)了開始導(dǎo)致arr為空、頁面無反應(yīng)。所以要么在加載完成前禁用按鈕要么在showRandomNum開頭加一句if (code.length 0) return;。如果活動方堅(jiān)持用真實(shí)手機(jī)號記得在展示時做脫敏比如138****8888這既是隱私要求也能避免大屏上完整號碼被拍照傳播。脫敏可以在showRandomNum拼li時處理function maskPhone(phone) { var s String(phone); if (s.length ! 11) return s; return s.slice(0, 3) **** s.slice(7); }然后在li li maskPhone(code[index]) /li;里調(diào)用。參數(shù)11是手機(jī)號長度邀請碼場景直接返回原值即可。3.3 前端抽獎與后臺去重的邊界原代碼注釋里有一句很實(shí)在的話“去除中獎的手機(jī)號這個前端貌似沒法實(shí)現(xiàn)只能后臺去控制”。這是這份代碼最值得尊重的邊界意識。前端能做的是“單次展示不重復(fù)”靠的是索引數(shù)組洗牌但“跨輪次不重復(fù)”必須后臺兜底因?yàn)榍岸怂⑿马撁?、換臺電腦、甚至改內(nèi)存都能繞過。常見做法是前端每次停止?jié)L動后把本輪中獎號碼 POST 給后臺后臺在數(shù)據(jù)庫里標(biāo)記這些號碼已中獎下一輪拉取號碼池時只返回未中獎的。前端這邊可以在停止時加一個提交動作function submitWinners(winners, grade, money) { $.ajax({ url: /api/draw/commit, type: POST, contentType: application/json, data: JSON.stringify({ grade: grade, money: money, winners: winners }), success: function (res) { if (!res.ok) { alert(后臺記錄失敗請人工核對 winners.join(,)); } }, error: function () { alert(網(wǎng)絡(luò)異常本輪中獎號碼請人工記錄 winners.join(,)); } }); }邏輯說明winners是本輪showRandomNum實(shí)際展示的號碼數(shù)組需要在停止時從當(dāng)前l(fā)i里收集。grade和money來自設(shè)置控件。參數(shù)contentType必須是application/json否則后臺解析會出問題。這個提交動作是“后悔藥”即使后臺失敗彈窗里也帶著號碼主持人可以人工記錄不至于現(xiàn)場失控。注意前端永遠(yuǎn)不要承擔(dān)“判斷誰沒中過獎”的職責(zé)。號碼池的去重、已中獎標(biāo)記、獎項(xiàng)庫存全部放后臺。前端只負(fù)責(zé)把號碼滾得好看、停得干脆、把結(jié)果報回去。4. 現(xiàn)場避坑抽獎代碼最容易翻車的五個地方這份代碼我前后改過三版彩排和正式上場各踩過一些坑。下面五條按“現(xiàn)象 → 原因 → 解決”寫都是現(xiàn)場會要命的。4.1 同一個號碼連續(xù)出現(xiàn)現(xiàn)象滾動過程中同一個號碼在相鄰兩次刷新里都出現(xiàn)臺下有人喊“重復(fù)了”。原因arr.sort(function(){ return 0.5 - Math.random(); })這種洗牌方式在數(shù)組較小時分布不均勻而且每次showRandomNum都重新洗牌理論上相鄰兩次的前num個索引可能重疊。單次展示內(nèi)部不重復(fù)但跨刷新會重復(fù)視覺上就像“沒抽干凈”。解決如果要求滾動過程中也不出現(xiàn)重復(fù)可以把洗牌結(jié)果緩存一輪滾動時按順序切片展示而不是每次重洗。或者接受“滾動過程允許重復(fù)、停止那一刻不重復(fù)”因?yàn)樽罱K結(jié)果只取停止時的li。我一般選后者并在主持人話術(shù)里說明“滾動中號碼會變化以停止為準(zhǔn)”。4.2 單次人數(shù)超過 10 導(dǎo)致布局錯亂現(xiàn)象把中獎人數(shù)填成 15號碼擠成三行第三行被overflow:hidden裁掉大屏上只看到 10 個。原因.prize_list高度固定 350pxli行高 100px最多容納三行多.prize_list li寬度 20%一行五個10 個正好兩行。超過 10 個就換行溢出。解決代碼里已經(jīng)用$(#prizeCount).val() 10做了攔截但如果你要放開上限必須同步改 CSS把.prize_list高度按Math.ceil(num/5) * 100動態(tài)設(shè)置或者縮小li的line-height和font-size。我一般會在showRandomNum里根據(jù)num動態(tài)調(diào)字號function adjustLayout(num) { var $list $(.prize_list); var rows Math.ceil(num / 5); $list.css(height, rows * 100 px); var fontSize num 10 ? 32 : 45; $list.find(li).css(font-size, fontSize px); }參數(shù)5是每行個數(shù)100是單行高度和 CSS 里的line-height保持一致。4.3 定時器沒清干凈停止后還在滾現(xiàn)象主持人按了停止號碼還在跳或者按了開始沒反應(yīng)。原因myNumber是全局變量如果頁面里有多個入口觸發(fā)setInterval或者clearInterval之前又點(diǎn)了一次開始會疊加多個定時器。另外#prize_btn狀態(tài)鎖如果被其他腳本改動狀態(tài)機(jī)會錯亂。解決在啟動新定時器前先clearInterval(myNumber)并且把myNumber置空判斷if (myNumber) { clearInterval(myNumber); myNumber null; } myNumber setInterval(function () { showRandomNum(num); }, 30);停止時同樣先判斷再清。狀態(tài)鎖#prize_btn只在這一個 click 回調(diào)里讀寫不要在其他地方改。4.4 回車鍵在輸入框里誤觸發(fā)現(xiàn)象主持人在“人數(shù)”輸入框里按回車確認(rèn)輸入結(jié)果抽獎直接開始了。原因$(document).keydown綁在 document 上輸入框里的回車也會冒泡到 document觸發(fā).start的 click。解決在 keydown 里判斷事件源如果是 input 或 select 就跳過$(document).keydown(function (event) { var e event || window.event; var tag (e.target || e.srcElement).tagName.toLowerCase(); if (tag input || tag select || tag textarea) return; if (e.keyCode 13) { $(.start).click(); } });這樣輸入框里回車只用于確認(rèn)輸入不會誤啟動抽獎。4.5 號碼池異步加載與點(diǎn)擊競態(tài)現(xiàn)象頁面剛打開號碼池還沒請求回來主持人就按了開始大屏上號碼全是undefined或空白。原因code初始為空數(shù)組showRandomNum里arr長度 0arr[i]越界。解決在showRandomNum開頭加保護(hù)并在號碼池加載完成前禁用按鈕function showRandomNum(num) { if (!code || code.length 0) return; if (num code.length) num code.length; // ...原有邏輯 }同時loadCodes成功前給.start加pointer-events:none; opacity:0.5加載完成后移除。這個競態(tài)在本地用假數(shù)據(jù)時看不出來一接真實(shí)接口就暴露屬于典型的“本地好好的現(xiàn)場就翻車”。5. 進(jìn)階把隨機(jī)索引換成 Fisher-Yates 并做一輪可驗(yàn)證的抽獎原代碼的arr.sort洗牌在幾百條號碼時夠用但如果你想把這份 js 手機(jī)號滾動抽獎代碼用在號碼池上千、且對隨機(jī)均勻性有要求的場合建議把洗牌換成 Fisher-Yates。它不需要額外庫幾行就能替換而且結(jié)果可復(fù)現(xiàn)、可驗(yàn)證。function shuffle(arr) { var a arr.slice(); for (var i a.length - 1; i 0; i--) { var j Math.floor(Math.random() * (i 1)); var t a[i]; a[i] a[j]; a[j] t; } return a; } function showRandomNum(num) { if (!code || code.length 0) return; if (num code.length) num code.length; var indexArr []; for (var i 0; i code.length; i) indexArr.push(i); var shuffled shuffle(indexArr); var li ; for (var i 0; i num; i) { li li code[shuffled[i]] /li; } $(.prize_list ul).html(li); }邏輯說明shuffle從數(shù)組末尾往前遍歷每次在[0, i]范圍內(nèi)隨機(jī)取一個位置j交換a[i]和a[j]。這樣每個元素被放到每個位置的概率相等是公認(rèn)均勻的洗牌算法。參數(shù)a.length - 1是起始索引i 0保證索引 0 不用再交換。替換后showRandomNum的行為和原來一致但隨機(jī)分布更穩(wěn)號碼池越大優(yōu)勢越明顯。驗(yàn)證方法我一般用“多次抽樣統(tǒng)計”在控制臺跑 1000 次showRandomNum的索引生成邏輯統(tǒng)計每個索引出現(xiàn)的次數(shù)理想情況下頻次應(yīng)該接近。下面這段只用于本地驗(yàn)證不上生產(chǎn)function verifyShuffle(total, times) { var counter new Array(total).fill(0); for (var t 0; t times; t) { var idx []; for (var i 0; i total; i) idx.push(i); var s shuffle(idx); counter[s[0]]; // 只統(tǒng)計第一個位置 } console.log(每個索引出現(xiàn)在首位的次數(shù), counter); } verifyShuffle(30, 3000);參數(shù)total是號碼池長度times是模擬次數(shù)。3000 次下每個索引出現(xiàn)在首位的次數(shù)應(yīng)該都在 100 上下浮動如果某個索引明顯偏高或偏低說明洗牌有問題。這個驗(yàn)證不需要后臺純前端就能跑適合上線前在本地過一遍。還有一個現(xiàn)場技巧把每輪中獎號碼在停止時同步寫進(jìn)localStorage作為前端側(cè)的“黑匣子”。萬一后臺提交失敗、網(wǎng)絡(luò)斷了刷新頁面后還能從localStorage里把已出號碼撈出來人工核對。寫法很簡單function saveWinners(winners) { var key draw_winners; var history JSON.parse(localStorage.getItem(key) || []); history.push({ time: Date.now(), winners: winners }); localStorage.setItem(key, JSON.stringify(history)); }參數(shù)key是存儲鍵名history是數(shù)組每次追加一條帶時間戳的記錄。注意localStorage只適合單機(jī)兜底不能替代后臺活動結(jié)束后記得清理避免下一場活動讀到舊數(shù)據(jù)。從那以后我每次接年會抽獎都強(qiáng)制走一遍“慢速驗(yàn)證不重復(fù) → 異步號碼池競態(tài)檢查 → 回車鍵輸入框過濾 → 后臺提交兜底”這四步少一步心里都不踏實(shí)。希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取