用JS簡單實現(xiàn)九宮格抽獎的示例代碼
效果展示

頁面布局
九宮格抽獎的布局基本是由九個方塊組成,一般有中間是一個開始抽獎按鈕,四周的方塊是不同的獎項;也有像掘金這樣的九個都是獎項,下面再加個抽獎按鈕;這里實現(xiàn)的是第一種類型
頁面主要包含一個標題和轉盤,轉盤包含8個獎品子元素和一個開始抽獎按鈕,使用flex布局,排列元素。
8個獎品子元素自定義了一個屬性data-order,表示開始抽獎的時候順時針方向上當前自己位置的索引

具體實現(xiàn)
1. 定義獎品數(shù)組prize_list
模擬出8個不同的獎品數(shù)據(jù)。循環(huán)獎品數(shù)組,將對應位置的獎品展示到頁面
獲取所有的獎品元素,前三個獎品數(shù)據(jù)直接展示到對應索引的獎品元素,后面的需要根據(jù)自定義屬性data-order指定當前數(shù)據(jù)展示在哪個位置(順時針方向指定位置)

2. 創(chuàng)建函數(shù)runCircle()
用于移除當前獎品元素的選中樣式,同時自增當前獎品的索引值,再加上選中樣式。當獎品索引值大于7時,獎品索引值需要變成0

3. 創(chuàng)建抽獎函數(shù)controll(),處理轉盤抽獎的運行邏輯
在該函數(shù)中自增抽獎轉動次數(shù),然后調用 runCircle 函數(shù)來改變當前選中的獎品獎項。如果抽獎的次數(shù)超過了 minimum_jumps + 10 并且當前選中的獎項就是獎品,那么就會停止抽獎,并在頁面上顯示一個消息,告訴用戶獲得了哪個獎品。否則,就根據(jù)抽獎的次數(shù)來改變轉盤轉動的速度。
當抽獎轉動次數(shù)等于抽獎開始的最小抽獎次數(shù)時,獎品的結果值
prizeId在0-8 的數(shù)值中隨機取得,決定出獎品的位置
const total_items = 8 //獎品的總數(shù)
let prizeId = -1 // 獎品的結果,初始值為-1,表示還沒有開始抽獎
let current_index = -1 //當前選中獎項索引
const minimum_jumps = 30 // 超過該數(shù)字進入抽獎
let jumps = 0 //抽獎轉動次數(shù),初始值為0
let speed = 100 //轉動速度
let timer = 0
let disabled = false
// 獎品抽獎
function controll() {
jumps += 1
runCircle()
// 抽到獎品停止游戲
if (jumps > minimum_jumps + 10 && prizeId === current_index) {
clearTimeout(timer)
disabled = false
const message = document.createElement('p')
message.className = 'message'
message.innerHTML = `恭喜你獲得:${prize_list[current_index].name}!`
container.appendChild(message)
prizeId = -1
jumps = 0
} else {
// 加快
if (jumps < minimum_jumps) {
speed -= 5
// 決定獎品的位置
} else if (jumps === minimum_jumps) {
prizeId = generatePrizeNumber()
} else {
// 下一個就是獎品時放慢速度
if ((jumps > minimum_jumps + 10) && prizeId === (current_index + 1)) {
speed += 600
} else {
speed += 20 // 減速
}
}
if (speed < 40) {
speed = 40
}
timer = setTimeout(controll, speed)
}
}
function init() {
jumps = 0
speed = 100
prizeId = -1
controll()
}
4. 添加開始抽獎按鈕的點擊事件,執(zhí)行抽獎函數(shù)開始抽獎
在已經(jīng)抽獎的情況下,改變disabled變量為真,防止重復執(zhí)行抽獎


根據(jù)以上步驟就可以實現(xiàn)一個簡單的九宮格抽獎了
到此這篇關于用JS簡單實現(xiàn)九宮格抽獎的示例代碼的文章就介紹到這了,更多相關JS實現(xiàn)九宮格抽獎內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
js實現(xiàn)前端跨域postMessage的具體使用
這篇文章主要介紹了js實現(xiàn)前端跨域postMessage的具體使用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-04-04

