基本實現功能
- 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(備註小程序)