小程序實現大轉盤,九宮格抽獎,帶跑馬燈效果

基本實現功能

  • 1,小程序仿天貓超市大轉盤
  • 2,九宮格轉盤抽獎
  • 3,積分抽獎
  • 4,抽到的積分隨機生成
  • 5,抽獎結果可以同步到服務器(小程序雲開發後臺)

老規矩先看效果圖


簡單說一下實現原理.

我們藉助js的定時器,來執行一個加法。比如我們設置一個上限300,每過一定時間執行一次,然後我們再做一個隨機數,這個隨機數不停的++,直到總數大於300.就代表抽獎結束。核心代碼如下。

 //開始抽獎
 startGame: function() {
  if (this.data.isRunning) return
  this.setData({
   isRunning: true
  })
  var _this = this;
  var indexSelect = 0
  var i = 0;
  var timer = setInterval(function() {
   indexSelect++;
   let randomNum = Math.floor(Math.random() * 10) * 10; //可均衡獲取0到90的隨機整數
   i += randomNum;
   if (i > 300) {
    //去除循環
    clearInterval(timer)
    //獲獎提示
    let jifen = 1;
    let selectNum = _this.data.indexSelect
    console.log("選號:" + selectNum );
    if (selectNum===0) {
     jifen = 2;
    } else if (selectNum === 1) {
     jifen = 3;
    }  else if (selectNum === 2) {
     jifen = 4;
    }  else if (selectNum === 3) {
     jifen = 5;
    } else if(selectNum === 4) {
     jifen = 6;
    } else if(selectNum === 5) {
     jifen = 8;
    } else if (selectNum === 6) {
     jifen = 10;
    }
    wx.showModal({
     title: '恭喜您',
     content: '獲得了' + jifen + "積分",
     showCancel: false, //去掉取消按鈕
     success: function(res) {
      if (res.confirm) {
       _this.setData({
        isRunning: false
       })
      }
     }
    })
   }
   indexSelect = indexSelect % 8;
   _this.setData({
    indexSelect: indexSelect
   })
  }, (200 + i))
 }

完整源碼可以加我微信,如果有關於小程序的問題,可以加我微信2501902696(備註小程序)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章