uniapp九宫格抽奖可控概率

最新推荐文章于 2024-03-27 18:48:10 发布
最新推荐文章于 2024-03-27 18:48:10 发布
阅读量3.3k 收藏 36
点赞数
分类专栏： uni-app 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lhkuxia/article/details/106851781
版权

最近因项目需要,做了一个抽奖的功能,前端负责抽取,后端提供奖品名称,图片,概率等,具体逻辑见代码注释
在这里插入图片描述
素材在最下面

代码:
html

<view class="container">
			<view class="frame_view" :style="'background-image:url(' + img + '.gif)'">
				<view class="frame_row">
					<view class="frame_item" :class="'item' + color[0]" :style="'background-image:url(' + img + color[0] + '.png)'">
						<image :src="award[0].img"></image>
						<text>{{ award[0].name }}</text>
					</view>
					<view class="frame_item" :class="'item' + color[1]" :style="'background-image:url(' + img + color[1] + '.png)'">
						<image :src="award[1].img"></image>
						<text>{{ award[1].name }}</text>
					</view>
					<view class="frame_item" :class="'item' + color[2]" :style="'background-image:url(' + img + color[2] + '.png)'">
						<image :src="award[2].img"></image>
						<text>{{ award[2].name }}</text>
					</view>
				</view>

				<view class="frame_row">
					<view class="frame_item" :class="'item' + color[7]" :style="'background-image:url(' + img + color[7] + '.png)'">
						<image :src="award[7].img"></image>
						<text>{{ award[7].name }}</text>
					</view>
					<image class="frame_item" :src="btnconfirm" @click="clickLuck"></image>
					<view class="frame_item" :class="'item' + color[3]" :style="'background-image:url(' + img + color[3] + '.png)'">
						<image :src="award[3].img"></image>
						<text>{{ award[3].name }}</text>
					</view>
				</view>

				<view class="frame_row">
					<view class="frame_item" :class="'item' + color[6]" :style="'background-image:url(' + img + color[6] + '.png)'">
						<image :src="award[6].img"></image>
						<text>{{ award[6].name }}</text>
					</view>
					<view class="frame_item" :class="'item' + color[5]" :style="'background-image:url(' + img + color[5] + '.png)'">
						<image :src="award[5].img"></image>
						<text>{{ award[5].name }}</text>
					</view>
					<view class="frame_item" :class="'item' + color[4]" :style="'background-image:url(' + img + color[4] + '.png)'">
						<image :src="award[4].img"></image>
						<text>{{ award[4].name }}</text>
					</view>
				</view>
			</view>
		</view>

js

<script>
//计数器
var interval = null;
//值越大旋转时间越长  即旋转速度
var intime = 50;
export default {
	data() {
		return {
			color: [0, 0, 0, 0, 0, 0, 0, 0],
			award: [
					{chance:10,name:'奖品一',status:1},
					{chance:30,name:'奖品二',status:1},
					{chance:20,name:'奖品三',status:1},
					{chance:20,name:'奖品四',status:1},
					{chance:10,name:'奖品五',status:1},
					{chance:10,name:'奖品六',status:1},
					{chance:60,name:'奖品七',status:1},
					{chance:10,name:'谢谢惠顾',status:0}
				],//概率数组，格式可以自己设计，目的为了形成一个奖池
			img: getApp().globalData.img_url + 'k_bg',//图片链接
			btnconfirm: getApp().globalData.img_url + '/dianjichoujiang.png',//点击图片链接
			Luck: true,//防置重复点击
			luckPosition: 0 //停止位置
		};
	},
	methods: {
		clickLuck() {
			if (this.Luck == false) {//防止过度点击
				return;
			}
			this.Luck = false;
			var arr = [];
			//根据概率循环位置
			for (var i = 0; i < this.award.length; i++) {
				for (var k = 0; k < this.award[i].chance; k++) {
					arr.push(i);
				}
			}
			console.log(arr);
			//[0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,7]
			//随机打乱数组
			for (let i = 0, len = arr.length; i < len; i++) {
				let index = parseInt(Math.random() * (len - 1));
				let tempValue = arr[i];
				arr[i] = arr[index];
				arr[index] = tempValue;
			}
			console.log(arr);
			//[2,6,1,1,1,6,3,5,4,1,3,2,0,6,6,6,1,2,1,1,6,7,6,4,0,1,6,1,6,1,1,2,7,6,2,2,6,5,6,3,6,3,6,6,6,6,3,4,1,2,1,5,6,7,4,0,7,6,0,6,5,7,2,6,6,7,6,2,6,6,6,3,1,1,3,6,2,1,3,5,5,6,2,6,6,5,1,0,3,6,6,6,0,2,7,5,6,0,6,2,1,2,1,6,5,1,4,3,3,6,4,6,3,6,3,3,1,1,2,7,1,6,4,2,6,1,1,1,6,3,6,6,3,6,6,3,4,7,1,0,2,6,4,0,6,5,3,2,6,2,6,6,6,6,0,4,6,1,6,1,7,6,6,3,6,6,3,6,1,2]
			//从数组中随机抽取一个位置
			var a = Math.ceil(Math.random() * 100);
			console.log(arr[a],a);//5,81 每次不一样
			this.luckPosition = arr[a];
			var e = this;
			//设置按钮不可点击
			e.btnconfirm = getApp().globalData.img_url + '/dianjichoujiangd.png';
			//清空计时器
			clearInterval(interval);
			var index = 0;
			//循环设置每一项的背景图
			interval = setInterval(function() {
				var c = [0, 0, 0, 0, 0, 0, 0, 0];
				if (index > 7) {
					index = 0;
				}
				c[index] = 1;
				e.color = c;
				index++;
			}, intime);
			// console.log(intime);
			//模拟网络请求时间  设为两秒
			var stoptime = 1000;
			setTimeout(function() {
				e.stop(e.luckPosition);
			}, stoptime);
		},
		stop(which) {
			var e = this;
			//清空计数器
			clearInterval(interval);
			//初始化当前位置
			var current = -1;
			var color = e.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(which, index, time, splittime) {
			var e = this;
			//值越大出现中奖结果后减速时间越长
			var color = e.color;
			setTimeout(function() {
				//重置前一个位置
				var c = [0, 0, 0, 0, 0, 0, 0, 0];
				if (index > 7) {
					index = 0;
				}
				//当前位置为选中状态
				c[index] = 1;
				e.color = c;
				//如果旋转时间过短或者当前位置不等于中奖位置则递归执行
				//直到旋转至中奖位置
				if (time < 400 || index != which) {
					//越来越慢
					splittime++;
					time += splittime;
					//当前位置+1
					index++;
					e.stopLuck(which, index, time, splittime);
				} else {
					//1秒后显示弹窗
					setTimeout(function() {
						if (e.award[which].status == 1) {
							//中奖
							uni.showModal({
								title: '提示',
								content: '恭喜中奖',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										//设置按钮可以点击
										e.btnconfirm = getApp().globalData.img_url + '/dianjichoujiang.png';
										e.Luck = true;
									}
								}
							});
						} else {
							//中奖
							uni.showModal({
								title: '提示',
								content: '很遗憾未中奖',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										//设置按钮可以点击
										e.btnconfirm = getApp().globalData.img_url + '/dianjichoujiang.png';
										e.Luck = true;
									}
								}
							});
						}
					}, 1000);
				}
			}, time);
		}
	}
};
</script>

css

<style>
.container {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 0;
	box-sizing: border-box;
}
.frame_view {
	bottom: 160rpx;
	left: 60rpx;
	right: 60rpx;
	width: 618rpx;
	height: 660rpx;
	padding: 50rpx;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	border-radius: 30rpx;
	background-repeat: no-repeat;
	background-size: 100%;
}
.frame_row {
	width: 520rpx;
	height: 180rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.frame_item {
	width: 160rpx;
	height: 168rpx;
	background-repeat: no-repeat;
	background-size: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	font-size: 20px;
	padding: 10rpx 0;
}
.frame_item image {
	width: 100rpx;
	height: 100rpx;
	display: block;
}
.frame_item text {
	font-size: 14px;
	display: block;
	width: 100%;
	text-align: center;
}
.item1 {
	color: #ffffff;
}
</style>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

苦夏木禾
关注
  • 0
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 9
    评论
专栏目录
九宫格抽奖(内包含概率以及不重复抽到相同奖品)
01-15
web实现九宫格抽奖，实现概率抽奖 不重复抽奖，抽到之后改奖品增加盖章效果
uniapp 九宫格抽奖功能
weixin_58431406的博客
06-15 1321
uniapp 九宫格抽奖功能
使用uniapp的WebView实现轮盘抽奖
最新发布
yiyuanpeng2004的博客
03-27 902
实现思路 朋友们总是在吃饭的时候纠结到底吃什么好，在哪儿纠结吃这个还是吃这个呢？开始犯上了选择困难症，老是磨磨唧唧的。有一天突发奇想整一个随机抽奖吃饭APP,所以编写了以下代码 这里使用了lucky-canvas的抽奖插件 点击这里进入框架 起初我是想打包成APK放到手机上来方便使用的，但是该插件只支持H5与小程序等，不支持APP端，我就思来想去可以使用WebView来实现这个功能呀！ 可以点击这里 实机演示具体实现效果就是这样由于是简单做的一个主要是完成功能，没有注重样式。 这里是UniApp详细代码演示
uniapp九宫格抽奖
qq_43703488的博客
07-23 1875
效果如图 这里用了一个 uniapp的一个插件 贴个地址 https://100px.net/usage/uni-app.html npm 安装： npm install uni-luck-draw 也可以选择通过 HBuilderX 导入插件： https://ext.dcloud.net.cn/plugin?id=3499 然后引入注册组件即可 使用 <LuckyGrid ref="LuckDraw" width="540rpx" height="490rpx" :prizes="priz
uni.app 九宫格抽奖
pangzi_mm的博客
12-13 464
九宫格抽奖
uniapp九宫格抽奖可控概率效果demo（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
08-06 528
uniapp九宫格抽奖可控概率效果demo
实现一个九宫格抽奖，全部到位
05-07
实现一个九宫格抽奖，全部到位
九宫格抽奖概率控制不重复奖品
08-04
九宫格抽奖概率控制不重复奖品
幸运九宫格抽奖码,九宫格抽奖系统源码php+mysql,微信抽奖系统
06-26
php+mysql幸运九宫格抽奖码抽奖系统，适合营销，门店活动，公司活动，微信抽奖，公众号抽奖。可设置背景音乐，可设置中奖概率，可以设置奖项。 抽奖营销工具，广泛应用于 ：公司年会、商场促销、销售促销、答谢会、...
基于VUE实现的九宫格抽奖功能
10-17
主要介绍了基于VUE实现的九宫格抽奖功能，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
幸运九宫格抽奖系统带后台开源解密源码
08-01
幸运九宫格抽奖码抽奖系统，适合营销，门店活动，公司活动，微信抽奖，公众号抽奖。可设置背景音乐，可设置中奖概率，可以设置奖项。抽奖营销工具，广泛应用于 ：公司年会、商场促销、销售促销、答谢会、线上推广：...
ios-OC 九宫格抽奖、可以设置概率.zip
07-11
九宫格抽奖
微信小程序实现九宫格抽奖
01-03
本文实例为大家分享了微信小程序实现九宫格抽奖的具体代码，适用于年会抽奖，供大家参考，具体内容如下 效果图比较卡顿，真实运行效果是旋转的 用到的素材： 实现步骤： 实现原理 改变每一项的透明度实现选中效果。利用setTimeOut时间使旋转速度越来越慢。达到慢慢停止的效果。实际应用中可以将9张奖品图片和中奖项均通过接口返回。以方便奖品的调整。  1.布局绘制 停止位置:<input value='{{luckPosition}}' style=width:100%;text-align:center bindinput='input'
uniapp 九宫格抽奖
qq_44866534的博客
05-08 782
git地址 去git下载呦！这里直截取了部分代码 九宫格抽奖 /* func业务逻辑（带返回值） func2 判断（返回值为true/false）(参数为func获取到的值) func3 停止循环之后干的事情 比如弹框等 */ let runTimerOut = (Func,func2,CallBack) => { let timeOut = setTimeout(() => { console.log(typeof Func) if
uniapp 九宫格抽抽奖
YUlangML的博客
06-16 618
【代码】uniapp 九宫格抽抽奖。
uni-app 九宫格抽奖活动
Tianxiaoxixi的博客
10-20 1053
uni-app 九宫格抽奖活动
九宫格抽奖概率算法
zdgdq的专栏
03-25 930
$prizeList = [1=>["id"=>1,"name"=>'A',"chance"=>50],2=>["id"=>2,"name"=>'B',"chance"=>80],3=>["id"=>3,"name"=>'C',"chance"=>70]]; $arr = [1=>50,2=>80,3=>70]; $prize_id = get_rand($arr); //根据概率获取奖项id function get
适用uniapp微信小程序的九宫格抽奖
m0_50873766的博客
01-27 529
【代码】适用uniapp微信小程序的九宫格抽奖。
uniapp实现简单的九宫格抽奖（附源码）
盛国强的博客
10-18 1662
uniapp实现简单的九宫格抽奖

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

苦夏木禾

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值