站点图标 起风网

小程序实现大转盘,九宫格抽奖,带跑马灯效果

基本实现功能

老规矩先看效果图

抽奖大转盘

简单说一下实现原理.

我们借助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(备注小程序)

文章转载于:https://www.jianshu.com/p/1282e78b4db2

原著是一个有趣的人,若有侵权,请通知删除

退出移动版