【黄啊码】小程序：九宫格抽奖如何实现？可控制抽奖率
【摘要】
黄啊码向来简单粗暴，来，代码伺候
js代码如下：
//index.js//获取应用实例const app = getApp() //计数器var interval = null; //值越大旋转时间越长 即旋转速度var intime = 50; Page({ data: { color: [0.5, 0....
黄啊码向来简单粗暴，来，代码伺候
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=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就是八个标题的内容
-
-
}
-
})
-
-
},
-
-
//点击抽奖按钮
-
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);
-
-
//模拟网络请求时间 设为两秒
-
var stoptime = 2000;
-
setTimeout(function () {
-
e.stop(e.data.luckPosition);
-
}, stoptime)
-
-
},
-
-
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;
-
-
e.stopLuck(which, index, intime, 10);
-
},
-
-
-
/**
-
* which:中奖位置
-
* index:当前位置
-
* time：时间标记
-
* splittime：每次增加的时间 值越大减速越快
-
*/
-
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',
-
})
-
}
-
}
-
})
-
-
}, 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，我的宝？
https://shimo.im/docs/8PGqp3cHtwVxcTPp文章来源: markwcm.blog.csdn.net，作者：黄啊码，版权归原作者所有，如需转载，请联系作者。
原文链接：markwcm.blog.csdn.net/article/details/121751638
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）