效果展示

頁面布局

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

頁面主要包含一個(gè)標(biāo)題和轉(zhuǎn)盤，轉(zhuǎn)盤包含8個(gè)獎(jiǎng)品子元素和一個(gè)開始抽獎(jiǎng)按鈕，使用flex布局，排列元素。

8個(gè)獎(jiǎng)品子元素自定義了一個(gè)屬性data-order，表示開始抽獎(jiǎng)的時(shí)候順時(shí)針方向上當(dāng)前自己位置的索引

具體實(shí)現(xiàn)

1. 定義獎(jiǎng)品數(shù)組prize_list

模擬出8個(gè)不同的獎(jiǎng)品數(shù)據(jù)。循環(huán)獎(jiǎng)品數(shù)組，將對應(yīng)位置的獎(jiǎng)品展示到頁面

獲取所有的獎(jiǎng)品元素，前三個(gè)獎(jiǎng)品數(shù)據(jù)直接展示到對應(yīng)索引的獎(jiǎng)品元素，后面的需要根據(jù)自定義屬性data-order指定當(dāng)前數(shù)據(jù)展示在哪個(gè)位置（順時(shí)針方向指定位置）

2. 創(chuàng)建函數(shù)runCircle()

用于移除當(dāng)前獎(jiǎng)品元素的選中樣式，同時(shí)自增當(dāng)前獎(jiǎng)品的索引值，再加上選中樣式。當(dāng)獎(jiǎng)品索引值大于7時(shí)，獎(jiǎng)品索引值需要變成0

3. 創(chuàng)建抽獎(jiǎng)函數(shù)controll（），處理轉(zhuǎn)盤抽獎(jiǎng)的運(yùn)行邏輯

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

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

const total_items = 8 //獎(jiǎng)品的總數(shù)
let prizeId = -1 // 獎(jiǎng)品的結(jié)果，初始值為-1，表示還沒有開始抽獎(jiǎng)
let current_index = -1 //當(dāng)前選中獎(jiǎng)項(xiàng)索引
const minimum_jumps = 30 // 超過該數(shù)字進(jìn)入抽獎(jiǎng)
let jumps = 0 //抽獎(jiǎng)轉(zhuǎn)動(dòng)次數(shù)，初始值為0
let speed = 100  //轉(zhuǎn)動(dòng)速度
let timer = 0   
let disabled = false
// 獎(jiǎng)品抽獎(jiǎng)
function controll() {
  jumps += 1
  runCircle()
  // 抽到獎(jiǎng)品停止游戲
  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
      // 決定獎(jiǎng)品的位置
    } else if (jumps === minimum_jumps) {
      prizeId = generatePrizeNumber()
    } else {
      // 下一個(gè)就是獎(jiǎng)品時(shí)放慢速度
      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. 添加開始抽獎(jiǎng)按鈕的點(diǎn)擊事件，執(zhí)行抽獎(jiǎng)函數(shù)開始抽獎(jiǎng)

在已經(jīng)抽獎(jiǎng)的情況下，改變disabled變量為真，防止重復(fù)執(zhí)行抽獎(jiǎng)

根據(jù)以上步驟就可以實(shí)現(xiàn)一個(gè)簡單的九宮格抽獎(jiǎng)了

到此這篇關(guān)于用JS簡單實(shí)現(xiàn)九宮格抽獎(jiǎng)的示例代碼的文章就介紹到這了,更多相關(guān)JS實(shí)現(xiàn)九宮格抽獎(jiǎng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論