JS打造九宮格抽獎的思路及實(shí)現(xiàn)代碼
前言
在如今的營銷活動中，抽獎功能已經(jīng)成為提升用戶活躍度的標(biāo)配。尤其是“九宮格抽獎”這種形式，因其視覺沖擊力強(qiáng)、交互簡單、適配性好，被廣泛應(yīng)用于電商、社交、內(nèi)容平臺等各類場景。本文將帶你從零開始，使用 原生 JavaScript 實(shí)現(xiàn)一個可配置、可擴(kuò)展、動畫流暢的九宮格抽獎組件，支持運(yùn)營人員通過 JSON 配置獎品信息，前端無需上線即可更新抽獎內(nèi)容。
一、總體思路
1. 數(shù)據(jù)結(jié)構(gòu)：獎品配置 JSON 化
為了支持運(yùn)營實(shí)時配置獎品，我們將獎品信息抽象為 JSON 格式：
[
{"id":1,"name":"iPhone","img":"http://cdn/1.png"},
{"id":2,"name":"現(xiàn)金50元","img":"http://cdn/2.png"},
{"id":3,"name":"HUAWEI","img":"http://cdn/3.png"},
{"id":4,"name":"現(xiàn)金10元","img":"http://cdn/4.png"},
{"id":5,"name":"謝謝參與","img":"http://cdn/5.png"},
{"id":6,"name":"手機(jī)優(yōu)惠券","img":"http://cdn/6.png"},
{"id":7,"name":"電腦優(yōu)惠券","img":"http://cdn/7.png"},
{"id":8,"name":"U盤","img":"http://cdn/8.png"}
]
優(yōu)點(diǎn)：前端只負(fù)責(zé)展示和動畫，中獎邏輯由后端控制，避免暴露算法，提升安全性。
2.核心思路
我們將整個抽獎流程抽象為兩個核心步驟：
- 繪制獎品視圖：無論使用 flex 、 grid 還是 absolute ，只要按順序渲染獎品 DOM，順序即代表“跑道”順序。
- 動畫高亮獎品：通過setInterval控制高亮項的切換，只操作索引，不依賴具體坐標(biāo)或行列。
這種設(shè)計的好處是：
- 布局可隨意更換（九宮格、圓環(huán)、橫向跑道）；
- 動畫邏輯不變，復(fù)用性極高；
- 支持動態(tài)增減獎品數(shù)量，只需更新 JSON 和 CSS。
二、html骨架
<div class="main">
<div class="content-container">
<div class="prize-list">
<img src="./img/prize_1.png" alt="">
<span>IphoneX</span>
</div>
<div class="prize-list">
<img src="./img/prize_2.png" alt="">
<span>現(xiàn)金50元</span>
</div>
<div class="prize-list">
<img src="./img/prize_3.png" alt="">
<span>HUAWEI</span>
</div>
<div class="prize-list">
<img src="./img/prize_4.png" alt="">
<span>現(xiàn)金10元</span>
</div>
<div class="prize-list">
<img src="./img/prize_5.png" alt="">
<span>謝謝參與</span>
</div>
<div class="prize-list">
<img src="./img/prize_6.png" alt="">
<span>手機(jī)優(yōu)惠券</span>
</div>
<div class="prize-list">
<img src="./img/prize_7.png" alt="">
<span>電腦優(yōu)惠券</span>
</div>
<div class="prize-list">
<img src="./img/prize_8.png" alt="">
<span>U盤</span>
</div>
<!-- 中心內(nèi)容部分 -->
<div class="handler-container">
<div class="inner-container">
<img class="handler-left" src="./img/center_1.png" alt="">
<div class="handler-container-middle">
還可以抽獎 <span class="prize-number">0</span> 次
</div>
<div class="handler-container-btn"></div>
</div>
</div>
</div>
<div class="dialog-container">
<div class="dialog-main">
<div class="head">
<span class="title">溫馨提示</span>
<span class="close">×</span>
</div>
<div class="content">
每次抽獎將消耗 8000 積分
</div>
<div class="dialog-main-footer">
<div class="button">再來一次</div>
</div>
</div>
</div>
</div>
三、js核心動畫
var runGame = function () {
var random = Math.floor(Math.random() * 6000 + 3000)
timer = setInterval(function () {
random -= 200
if (random < 200) {
clearInterval(timer)
timer = null
openDialog()
return
}
currentIndex = ++index % prizeList.length
prizeList.forEach(function (node) {
node.classList.remove('active')
})
prizeList[currentIndex].classList.add('active')
}, 50)
}
技術(shù)亮點(diǎn)：
- 索引循環(huán)： ++index % prizeList.length 保證無限循環(huán)；
- 時間遞減： random -= 200 模擬減速剎車效果；
- 動畫與結(jié)果分離：動畫結(jié)束后調(diào)用 openDialog() 顯示結(jié)果，邏輯清晰。
四、業(yè)務(wù)層
為了防止刷獎和前端篡改，我們將“中獎邏輯”放在后端：
流程如下：
- 前端點(diǎn)擊“抽獎”按鈕；
- 請求后端接口，后端根據(jù)權(quán)重隨機(jī)計算出中獎獎品；
- 后端返回中獎獎品的 id 和對應(yīng)索引 stopIndex ；
- 前端根據(jù) stopIndex 播放動畫，最終高亮到對應(yīng)獎品；
- 動畫結(jié)束后彈出結(jié)果提示。
? 優(yōu)點(diǎn)：
- 前端不暴露中獎邏輯，安全性高；
- 動畫與業(yè)務(wù)解耦，可復(fù)用性強(qiáng)；
- 支持運(yùn)營實(shí)時調(diào)整獎品和中獎概率，無需前端上線。
后續(xù)優(yōu)化建議
動畫性能優(yōu)化：使用 Web Animations API 或 CSS Animation 替代 setInterval ；
防抖節(jié)流：防止用戶快速點(diǎn)擊觸發(fā)多次抽獎；
狀態(tài)管理：引入輕量狀態(tài)機(jī)（如 xstate）管理抽獎流程；
音效與震動：增強(qiáng)用戶互動體驗(yàn)。
化建議動畫性能優(yōu)化：使用 Web Animations API 或 CSS Animation 替代 setInterval ；
防抖節(jié)流：防止用戶快速點(diǎn)擊觸發(fā)多次抽獎；
狀態(tài)管理：引入輕量狀態(tài)機(jī)（如 xstate）管理抽獎流程；
音效與震動：增強(qiáng)用戶互動體驗(yàn)。
總結(jié)
到此這篇關(guān)于JS打造九宮格抽獎的思路及實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)JS九宮格抽獎內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js獲取光標(biāo)位置和設(shè)置文本框光標(biāo)位置示例代碼
本實(shí)例描述了如何用Javascript來控制和獲取文本框/文本域的鼠標(biāo)光標(biāo)位置，以下代碼兼容IE和Chrome，F(xiàn)irefox，大家參考使用吧2014-01-01
基于JavaScript代碼實(shí)現(xiàn)pc與手機(jī)之間的跳轉(zhuǎn)
本文通過一段代碼實(shí)例給大家介紹pc跳轉(zhuǎn)手機(jī)代碼，手機(jī)跳轉(zhuǎn)pc網(wǎng)站代碼的相關(guān)知識，對js跳轉(zhuǎn)代碼相關(guān)知識感興趣的朋友一起通過本篇文章學(xué)習(xí)吧2015-12-12
編寫JS的過程中,我們經(jīng)常用到對象,也會用到對象中的屬性,下面這篇文章主要給大家介紹了關(guān)于JS判斷對象屬性是否存在的五種方案,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
今天小編就為大家分享一篇關(guān)于JavaScript常用事件介紹，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
用javascript實(shí)現(xiàn)給出的盒子的序列是否可連為一矩型
用javascript實(shí)現(xiàn)給出的盒子的序列是否可連為一矩型...2007-08-08
動態(tài)添加js事件，主要是不用具體指定位置的事件，這種動態(tài)添加事件的方法比較方便，并可以擴(kuò)展等。2009-03-03
ibm官方資料把應(yīng)用程序從 Internet Explorer 遷移到 Mozilla
使特定于 Internet Explorer 的 Web 應(yīng)用程序在 Mozilla 上運(yùn)行時，您遇到過麻煩嗎？本文討論了將應(yīng)用程序遷移到基于開源 Mozilla 瀏覽器上時的常見問題。首先討論跨瀏覽器開發(fā)的基本技術(shù)，然后介紹克服 Mozilla 和 Internet Explorer 之間差異的策略。2008-04-04
命名空間一個最明確的目的就是解決重名問題。這篇文章主要介紹了TypeScript 命名空間的相關(guān)知識，本文通過實(shí)例詳解給大家介紹的非常詳細(xì),需要的朋友可以參考下2020-03-03
Javascript中實(shí)現(xiàn)String.startsWith和endsWith方法
這篇文章主要介紹了Javascript中實(shí)現(xiàn)String.startsWith和endsWith方法,這兩個很好用的方法在JS中沒有,本文就自己編碼實(shí)現(xiàn)了這兩個方法,需要的朋友可以參考下2015-06-06
這篇文章主要為大家總結(jié)了一些JavaScript中字符串的常用方法，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下2022-12-12