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

更新時間：2023年12月21日 08:32:35 作者：sherlockkid7

在網(wǎng)上經(jīng)?？匆娨恍┏楠勴撁?也玩過不同類型的抽獎活動,但是一直沒有做過抽獎的功能,所以今天來實現(xiàn)一個簡單的九宮格抽獎功能,文中有詳細的代碼示例供大家參考,感興趣的朋友可以自己動手嘗試一下

效果展示

頁面布局

九宮格抽獎的布局基本是由九個方塊組成，一般有中間是一個開始抽獎按鈕，四周的方塊是不同的獎項；也有像掘金這樣的九個都是獎項，下面再加個抽獎按鈕；這里實現(xiàn)的是第一種類型

頁面主要包含一個標題和轉(zhuǎn)盤，轉(zhuǎ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（），處理轉(zhuǎn)盤抽獎的運行邏輯

在該函數(shù)中自增抽獎轉(zhuǎn)動次數(shù)，然后調(diào)用 runCircle 函數(shù)來改變當前選中的獎品獎項。如果抽獎的次數(shù)超過了 minimum_jumps + 10 并且當前選中的獎項就是獎品，那么就會停止抽獎，并在頁面上顯示一個消息，告訴用戶獲得了哪個獎品。否則，就根據(jù)抽獎的次數(shù)來改變轉(zhuǎn)盤轉(zhuǎn)動的速度。

當抽獎轉(zhuǎn)動次數(shù)等于抽獎開始的最小抽獎次數(shù)時，獎品的結(jié)果值prizeId在0-8 的數(shù)值中隨機取得，決定出獎品的位置

const total_items = 8 //獎品的總數(shù)
let prizeId = -1 // 獎品的結(jié)果，初始值為-1，表示還沒有開始抽獎
let current_index = -1 //當前選中獎項索引
const minimum_jumps = 30 // 超過該數(shù)字進入抽獎
let jumps = 0 //抽獎轉(zhuǎn)動次數(shù)，初始值為0
let speed = 100  //轉(zhuǎn)動速度
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()
}