小程序实现一个变速大转盘 |
您所在的位置：网站首页 › 微信小程序抽奖大转盘怎么做视频 › 小程序实现一个变速大转盘 |
|
使用小程序来实现一个大转盘吧！大转盘都不陌生，开始抽奖，然后停止的位置就是获得的奖品。 实现方法：setInterval 先来实现一下匀速大转盘吧 先将转盘设计好，比如3 x 3 的大转盘，中间是个开始按钮; 我这里设置的是背景颜色的变化，当抽奖到达某个位置时，这个位置的颜色发生变化； 先贴一下我的ttml页面吧（不要在意我奇怪的配色~） // index.ttml {{item}} 顺便css也贴一下吧，看效果直接复制就好了嘛 // index.ttss .box{ margin: 0 auto; width: 600rpx; display: flex; flex-wrap: wrap; border: 1px solid black; } .item{ width: 200rpx; height: 200rpx; line-height: 200rpx; text-align: center; } 另起一行，只是换个位置贴js 先看data：games是转盘上要显示的内容，转盘的格式可以根据自己的需求自己来写，我这个就是最基本的。active用来记录旋转到了什么位置,start用来记录开始的位置 再来看全局定义的round和timer。round用来设置一个轨迹，相当于铺路啦，里面是要走的下标，刚好是外围一圈。timer是定时器 最后看begin方法吧 // index.js const round = [0,1,2,5,8,7,6,3,0]; let timer ; Page({ data: { games:['$1','$2','$3','$4','开始','$5','$6','$7','$8'], active: 0, start: 0, }, onLoad: function (options) { }, beginLottery(){ this.begin(); }, // begin begin(){ let start = this.data.start; let random = Math.floor(Math.random()*9); let num = 0; timer = setInterval(() => { start++; start = start > 8 ? 0 : start; this.setData({ start, active: round[start] }) num++; if(num > 24 && this.data.active == random){// clearInterval(timer) } }, 70); } })比较简单，然后实现变速，其实速度的改变就是旋转一圈时间的改变 我这里的设计是：每旋转两圈实现一次变速，每次变速的时间在上一次时间上+100s，在第五圈停止 /index.js const round = [0, 1, 2, 5, 8, 7, 6, 3, 0]; let timer; // 定时器 let num = 0; // 用来记录一共转了几次，方便判断转的圈数 let start = 0; // 记录开始的位置下标 let random = ''; // 记录停下来的随机数（下标） let time = 70; // 记录定时器的时间 let count = 0; // 记录圈数，用来判断每2圈一次变速 Page({ data: { games: ['$1', '$2', '$3', '$4', '开始', '$5', '$6', '$7', '$8'], active: 0, }, onLoad: function (options) {}, beginLottery() { this.begin1(); }, begin1() { if(num != 0){ // 防止用户重复点击 return } timer = setInterval(this.process, time); }, // 旋转的过程 process() { start = start + 1; if (start >= 8) { start = 0; // 当start = 8的时候，表示已经转过1圈了count+1 count = count + 1; } this.setData({ active: round[start] }) num = num + 1; // 实现两圈一次变速 if (num % 8 === 0 && count === 2) { count = 0; clearInterval(timer); time = time + 100; timer = setInterval(this.process, time); // 转了4圈,即将在第五圈停止 if (Math.floor(num / 8) === 4) { this.getRandom(); } } if (this.data.active === random) { clearInterval(timer); num = 0; random = ''; time = 70; count = 0; } }, getRandom(){ let n = Math.floor(Math.random() * 9); if(n == 4){ this.getRandom(); }else{ random = n return; } } })示例代码是根据旋转的圈数来进行变速，也可以根据旋转一定的时间来实现变速，这样就需要使用setTimeout来实现。 好啦，这次记录就到这里啦，有更好的解决方案，性能优化 欢迎评论！ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |