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