小程序实现大转盘,九宫格抽奖,带跑马灯效果
基本实现功能
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(备注小程序)