【黄啊码】小程序:九宫格抽奖如何实现?可控制抽奖率

【黄啊码】小程序:九宫格抽奖如何实现?可控制抽奖率

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:59042273-98cf-44ef-9d60-6e3fcd7c3ebb

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:43a4a563-a340-42d5-8e7d-3b62fa772fd3

js代码如下:

php;gutter:true; //index.js //获取应用实例 const app = getApp()</p> <p>//计数器 var interval = null;</p> <p>//值越大旋转时间越长 即旋转速度 var intime = 50;</p> <p>Page({ data: { color: [0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5], //9张奖品图片 images: [], btnconfirm: '/images/dianjichoujiang.png', clickLuck:'clickLuck', luckPosition:2, prizeWeight:[], titles:[], },</p> <p>onLoad:function(){ var that=this; wx.request({ url: 'XXXXXXX', method:'POST', header: { 'content-type': 'application/json' // 默认值 }, data:{ },success(res){ that.setData({prizeWeight:res.data.data.percent_list});//奖项权重数组,表征各奖项的中奖机会占总数的百分比。比如一等奖的中奖率是1%,二等奖的中奖率是5% that.setData({images:res.data.data.images_list}); that.setData({titles:res.data.data.title_list}); //例子:prizeWeight:({5,5,10,20,30,10,10,10})记住是按顺序的,所有的加起来等于100,images就是八张图片的地址,titles就是八个标题的内容</p> <p>} })</p> <p>},</p> <p>//点击抽奖按钮 clickLuck:function(){ var e = this; var weightSum = e.data.prizeWeight.reduce(function(prev, currVal){ //计算权重之和:1+5+20+74=100 return prev + currVal; //prev 是前一次累加后的数值,currVal 是本次待加的数值 }, 0); console.log(weightSum); var random = Math.random()*weightSum; console.log(random); var concatWeightArr = e.data.prizeWeight.concat(random); //将随机数加入权重数组 console.log(concatWeightArr); var sortedWeightArr = concatWeightArr.sort(function(a, b){return a-b;}); //将包含随机数的新权重数组按从小到大(升序)排序 console.log(sortedWeightArr); var randomIndex = sortedWeightArr.indexOf(random); //索引随机数在新权重数组中的位置 console.log(randomIndex); randomIndex = Math.min(randomIndex, e.data.images.length -1); //权重随机数的下标不得超过奖项数组的长度-1,重新计算随机数在奖项数组中的索引位置 console.log(randomIndex); e.setData({luckPosition:randomIndex}); //设置按钮不可点击 e.setData({ btnconfirm:'/images/dianjichoujiangd.png', clickLuck:'', }) //清空计时器 clearInterval(interval); var index = 0; console.log(e.data.color[0]); //循环设置每一项的透明度 interval = setInterval(function () { if (index > 7) { index = 0; e.data.color[7] = 0.5 } else if (index != 0) { e.data.color[index - 1] = 0.5 } e.data.color[index] = 1 e.setData({ color: e.data.color, }) index++; }, intime);</p> <p>//模拟网络请求时间 设为两秒 var stoptime = 2000; setTimeout(function () { e.stop(e.data.luckPosition); }, stoptime)</p> <p>},</p> <p>stop: function (which){ var e = this; //清空计数器 clearInterval(interval); //初始化当前位置 var current = -1; var color = e.data.color; for (var i = 0; i < color.length; i++) { if (color[i] == 1) { current = i; } } //下标从1开始 var index = current + 1;</p> <p>e.stopLuck(which, index, intime, 10); },</p> <p>/*<em> * which:中奖位置 * index:当前位置 * time:时间标记 * splittime:每次增加的时间 值越大减速越快 </em>/ stopLuck: function (which, index,time,splittime){ var e = this; //值越大出现中奖结果后减速时间越长 var color = e.data.color; setTimeout(function () { //重置前一个位置 if (index > 7) { index = 0; color[7] = 0.5 } else if (index != 0) { color[index - 1] = 0.5 } //当前位置为选中状态 color[index] = 1 e.setData({ color: color, }) //如果旋转时间过短或者当前位置不等于中奖位置则递归执行 //直到旋转至中奖位置 if (time < 400 || index != which){ //越来越慢 splittime++; time += splittime; //当前位置+1 index++; e.stopLuck(which, index, time, splittime); }else{ //1秒后显示弹窗 setTimeout(function () { wx.showModal({ title: '提示', content: e.data.titles[which], showCancel: false, success: function (res) { if (res.confirm) { //设置按钮可以点击 e.setData({ btnconfirm: '/images/dianjichoujiang.png', clickLuck: 'clickLuck', }) } } })</p> <p>}, 1000); } }, time); console.log(time); } })</p> <pre><code> 前端: </code></pre> <p>class="container"> class='frame_view'> class='frame_row'> class='frame_item' style='opacity:{{color[0]}}' src='{{images[0]}}'> class='frame_item' style='opacity:{{color[1]}}' src='{{images[1]}}'> class='frame_item' style='opacity:{{color[2]}}' src='{{images[2]}}'></p> <p>class='frame_row'> class='frame_item' style='opacity:{{color[7]}}' src='{{images[7]}}'> class='frame_item' src='{{btnconfirm}}' bindtap='{{clickLuck}}'> class='frame_item' style='opacity:{{color[3]}}' src='{{images[3]}}'></p> <p>class='frame_row'> class='frame_item' style='opacity:{{color[6]}}' src='{{images[6]}}'> class='frame_item' style='opacity:{{color[5]}}' src='{{images[5]}}'> class='frame_item' style='opacity:{{color[4]}}' src='{{images[4]}}'></p> <pre><code> wxss: </code></pre> <p>/<strong>index.wxss</strong>/ .frame_view{ bottom: 160rpx; left: 60rpx; right: 60rpx; width:590rpx; height:590rpx; padding: 20rpx; background: #792db3; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; align-items: center; border-radius: 30rpx; } .frame_row{ width:580rpx; height:180rpx; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .frame_item{ width:180rpx; height:180rpx; }

嗯,就这样,如果还不会,扫我码,戳我头像,使劲戳,OK?

Original: https://www.cnblogs.com/huangama/p/15650951.html
Author: 黄啊码
Title: 【黄啊码】小程序:九宫格抽奖如何实现?可控制抽奖率

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/562263/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球