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

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

 黄啊码向来简单粗暴，来，代码伺候

js代码如下：

//index.js
//获取应用实例
const app = getApp()//计数器
var interval = null;//值越大旋转时间越长  即旋转速度
var intime = 50;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:[],},onLoad:function(){var that=quest({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就是八个标题的内容}})},//点击抽奖按钮clickLuck:function(){var e = this;var weightSum = e.duce(function(prev, currVal){    //计算权重之和：1+5+20+74=100return prev + currVal;    //prev 是前一次累加后的数值，currVal 是本次待加的数值}, 0);console.log(weightSum);var random = Math.random()*weightSum;console.log(random);var concatWeightArr = e.at(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(lor[0]);//循环设置每一项的透明度interval = setInterval(function () {if (index > 7) {index = 0;lor[7] = 0.5} else if (index != 0) {lor[index - 1] = 0.5}lor[index] = 1e.setData({color: lor,})index++;}, intime);//模拟网络请求时间  设为两秒var stoptime = 2000;setTimeout(function () {e.stop(e.data.luckPosition);}, stoptime)},stop: function (which){var e = this;//清空计数器clearInterval(interval);//初始化当前位置var current = -1;var color = lor;for (var i = 0; i < color.length; i++) {if (color[i] == 1) {current = i;}}//下标从1开始var index = current + 1;e.stopLuck(which, index, intime, 10);},/*** which:中奖位置* index:当前位置* time：时间标记* splittime：每次增加的时间 值越大减速越快*/stopLuck: function (which, index,time,splittime){var e = this;//值越大出现中奖结果后减速时间越长var color = lor;setTimeout(function () {//重置前一个位置if (index > 7) {index = 0;color[7] = 0.5} else if (index != 0) {color[index - 1] = 0.5}//当前位置为选中状态color[index] = 1e.setData({color: color,})//如果旋转时间过短或者当前位置不等于中奖位置则递归执行//直到旋转至中奖位置if (time < 400 || index != which){//越来越慢splittime++;time += splittime;//当前位置+1index++;e.stopLuck(which, index, time, splittime);}else{//1秒后显示弹窗setTimeout(function () {wx.showModal({title: '提示',content: e.data.titles[which],showCancel: false,success: function (res) {if (firm) {//设置按钮可以点击e.setData({btnconfirm: '/images/dianjichoujiang.png',clickLuck: 'clickLuck',})}}})}, 1000);}}, time);console.log(time);}
})

前端：

<!--index.wxml-->
<view class="container"><view class='frame_view'>
<view class='frame_row'>
<image class='frame_item' style='opacity:{{color[0]}}' src='{{images[0]}}'></image>
<image class='frame_item' style='opacity:{{color[1]}}' src='{{images[1]}}'></image>
<image class='frame_item' style='opacity:{{color[2]}}' src='{{images[2]}}'></image>
</view><view class='frame_row'>
<image class='frame_item' style='opacity:{{color[7]}}' src='{{images[7]}}'></image>
<image class='frame_item' src='{{btnconfirm}}' bindtap='{{clickLuck}}'></image>
<image class='frame_item' style='opacity:{{color[3]}}' src='{{images[3]}}'></image>
</view><view class='frame_row'>
<image class='frame_item' style='opacity:{{color[6]}}' src='{{images[6]}}'></image>
<image class='frame_item' style='opacity:{{color[5]}}' src='{{images[5]}}'></image>
<image class='frame_item' style='opacity:{{color[4]}}' src='{{images[4]}}'></image>
</view>
</view>
</view>

 wxss：

/**index.wxss**/
.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，我的宝？

看啥？进来扫码，一起玩代码石墨文档是一款轻便、简洁的在线协作文档工具，PC端和移动端全覆盖，支持多人同时对文档编辑和评论，让你与他人轻松完成协作撰稿、方案讨论、会议记录和资料共享等工作。