小程序 得九宫格抽奖，只是个demo，需要得自己改下细节
首先是wxml
<view class="container">
停止位置:<input value='{{luckPosition}}' style="width:100%;text-align:center" bindinput='input' type='number'></input>
<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>
然后是 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: ['/images/item.png', '/images/item1.png', '/images/item.png', '/images/item1.png', '/images/item.png', '/images/item1.png', '/images/item.png', '/images/item1.png', '/images/item.png'],
btnconfirm: '/images/dianjichoujiang.png',
clickLuck:'clickLuck',
luckPosition:1,
},
onLoad:function(){
this.loadAnimation();
},
input:function(e){
var data = e.detail.value;
this.setData({
luckPosition: data
})
},
//点击抽奖按钮
clickLuck:function(){
var e = this;
//判断中奖位置格式
if (e.data.luckPosition == null || isNaN(e.data.luckPosition) || e.data.luckPosition>7){
wx.showModal({
title: '提示',
content: '请填写正确数值',
showCancel:false,
})
return;
}
//设置按钮不可点击
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)
},
//也可以写成点击按钮停止抽奖
// clickStop:function(){
// var stoptime = 2000;
// setTimeout(function () {
// e.stop(1);
// }, 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 () {
if (which == 1 || which == 3 || which == 5 || which == 7) {
//中奖
wx.showModal({
title: '提示',
content: '恭喜中奖',
showCancel: false,
success: function (res) {
if (res.confirm) {
//设置按钮可以点击
e.setData({
btnconfirm: '/images/dianjichoujiang.png',
clickLuck: 'clickLuck',
})
e.loadAnimation();
}
}
})
} else {
//中奖
wx.showModal({
title: '提示',
content: '很遗憾未中奖',
showCancel: false,
success:function(res){
if(res.confirm){
//设置按钮可以点击
e.setData({
btnconfirm: '/images/dianjichoujiang.png',
clickLuck: 'clickLuck',
})
e.loadAnimation();
}
}
})
}
}, 1000);
}
}, time);
console.log(time);
},
//进入页面时缓慢切换
loadAnimation:function (){
var e = this;
var index = 0;
// if (interval == null){
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++;
}, 1000);
// }
}
})
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;
}
效果图
csdn 资源下载 地址：https://download.csdn.net/download/qq_41164267/14882740
![Javascript构建Bingo卡片游戏[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)