js實現大轉盤抽獎（vue舉例）

在開發項目得時候遇到這樣一個需求，在移動端項目有個支付抽獎頁面，大概效果圖如下：

簡單介紹一下需求，點擊抽獎按鈕轉盤轉動，轉盤里邊黃色塊塊是個整張背景圖，里邊的商品是從接口獲取得，包括獎品名稱和圖片，商品和中獎概率后台可以動態修改，唯一確定得是永遠有8個獎品。

1、布局樣式

 

每個item對應一個獎項區域，最開始讓八個div都在一起，然后按照小紅點得位置旋轉對應得角度，完成布局。

      .item:nth-child(1) {
        transform: rotate(22deg);
        transform-origin: bottom center;
      }

 

2、概率設置

function chance() {
    // 生成0-1的隨機數
    var rand = Math.random();
    // num代表第幾個獎品
    var num = 0;
    // 各個獎品的概率
    var probability = [0.1, 0.1, 0.1, 0.1, 0.2, 0.1, 0.1, 0.2];
    if (rand < 0.1) num = 1;
    else if (rand < 0.2) num = 2;
    else if (rand < 0.3) num = 3;
    else if (rand < 0.4) num = 4;
    else if (rand < 0.6) num = 5;
    else if (rand < 0.7) num = 6;
    else if (rand < 0.8) num = 7;
    else if (rand < 1) num = 8;
    return num
}

抽獎的實現有兩種思路，點擊開始抽獎按鈕，率先計算出中了哪個獎品，根據獎品的索引去旋轉對應的角度；還有一個思路是隨機旋轉某個角度，最后根據旋轉的角度找到對應獎品。目前使用的是第一中思路，感覺比第二種好算而且好理解。

點擊開始抽獎按鈕，計算出種了哪個獎品，一種實現是前端自己生成，如上邊代碼，一種是點擊的時候向后端發個請求，后端去計算，然后返回中獎獎品的信息，前端根據信息找到對應的獎品，然后旋轉。

3、旋轉

function  ratating(deg) {
      // timer計時器
      var timer = null
      // 盛放獎品的里邊轉盤div
      let inBox = this.$refs['in']
      let _this = this
      // rdm初始的角度，默認1800，旋轉5圈，deg是對應獎品的角度（轉盤旋轉完5圈后再次轉多少°能轉到對應的獎品），diff是如果連續可以抽多次，那么抽完一次后轉盤指針距離一個整圈還差多少度，第二次點擊抽獎讓指針不用重置，從當前位置繼續旋轉，第一次旋轉初始值為0
      this.rdm = this.rdm + deg + this.diff
      clearInterval(timer)
      // 旋轉時長，這里倒計時的時長和css設置的時長對應(transition: all 4s;)
      timer = setInterval(function () {
        inBox.style.transform = "rotate(" + _this.rdm + "deg)"
        clearInterval(timer)
        setTimeout(function () {
          if (_this.info.luck_num > 0) {
            _this.diff = 360 - deg
            _this.rdm += 1800
          }
          // 控制抽獎按鈕是否可以點擊，轉盤旋轉結束后可以再次點擊
          _this.offOn = !_this.offOn
          // 打開彈框
          _this.mask = true
          _this.stopScroll()
        }, 4000)
      }, 20)
    },