最近项目需求的一个抽奖功能给整理了下,语言表达能力不好,写的不好请勿吐槽,一笑而过就好。好了下面开始说说这个抽奖功能。因为涉及到公司的项目所以一些敏感的地方均已中文代替。
首先在后台添加奖品的名称以及概率如图:
后台代码没什么好说的,我们来看看前端代码。
通过html做出如下样式:
<div class="turntable-bg"> <div class="pointer"> <img id="pointer" src="~/Content/images/pointer.png" alt="pointer" /> </div> <div class="rotate"> <img id="turntable" src="~/Content/images/turntable.png" alt="turntable" /> </div> </div>
这里要注意切图时候的角度。不然旋转后所对应的角度就不对了。
下面给抽奖的指针添加点击事件:
function rotate() { $.ajax({ type: 'POST', url: '/控制器/方法', dataType: 'json', cache: false, error: function () { alert('出错了!'); return false; }, success: function (data) { if (data == 1 || data == -3) { var bRotate = true; if (data == 1) { alert("请登录!"); }if (data == -3) { alert("对不起,您的奖券不足!") } } else { var angles = parseInt(data.angle); //角度 var txt = data.prize; //奖项 var awards = parseInt(data.id); var bRotate = false; //如果bRotate为 true 的时候无法点击 var rotateFn = rotateFn_method(awards, angles, txt); if (bRotate) return; switch (awards) { case 0: //var angle = [26, 88, 137, 185, 235, 287, 337]; // rptateFn_method 三个参数均为后台传出,0,337 为转盘旋转所对应的角度,最后一个则为商品名称 rotateFn_method(0, 337, '奖品名称'); break; case 1: //var angle = [88, 137, 185, 235, 287]; rotateFn_method(1, 26, '奖品名称'); break; case 2: //var angle = [137, 185, 235, 287]; rotateFn_method(2, 88, '奖品名称'); break; case 3: //var angle = [137, 185, 235, 287]; rotateFn_method(3, 137, '奖品名称'); break; case 4: //var angle = [185, 235, 287]; rotateFn_method(4, 185, '奖品名称'); break; case 5: //var angle = [185, 235, 287]; rotateFn_method(5, 235, '奖品名称'); break; case 6: //var angle = [235, 287]; rotateFn_method(6, 235, '奖品名称'); break; case 7: //var angle = [287]; rotateFn_method(7, 282, '奖品名称'); break; } } } }); } //旋转事件 function rotateFn_method(awards, angles, txt) { var bRotate = false; bRotate = !bRotate; $('#turntable').stopRotate(); $('#turntable').rotate({ angle: 0, animateTo: angles + 1800, duration: 8000, callback: function () { $("#Pl h4").html("恭喜你抽中" + txt + ""); } bRotate = !bRotate; } }) }; //刷新当前页面 function locateEnd() { window.location.reload(); }
这样页面的转盘就可以旋转以及弹出奖品了,js中注释应该比较明确,我就不多对js进行解释了,下面来说说控制器里计算概率的逻辑,之所以不把概率计算写在js中,是因为js文件容易被篡改,想必大家都知道。话不多说,下面上代码:
//判断用户是否登录 if (admin != null) { //获取后台设置的数据,见图1 var LdList = hr.LuckdrawList(); //因为涉及到公司的项目所有一些敏感地方均已中文代替 List<double> dt = LdList.Select(i => i.概率).ToList(); //创建一个数值 double[] Array = dt.ToArray(); //角度 int angle = 0; //奖品 var prize = ""; var id = 0; //将概率放入数值,调用下面的Get方法计算出所返回的概率位于数值中的第几位 var Pl = Get(Array); //获取奖品表中位于Pl的产品 var model = LdList[Pl]; // id , angle 角度 prize 奖品 if (model.奖品等级 == 1) { angle = 26; prize = model.奖品; id = 1; } if (model.奖品等级 == 7) { angle = 88; prize = model.奖品; id = 2; } if (model.奖品等级 == 4) { angle = 137; prize = model.奖品; id = 3; } if (model.奖品等级 == 3) { angle = 185; prize = model.奖品; id = 4; } if (model.奖品等级 == 6) { angle = 235; prize = model.奖品; id = 5; } if (model.奖品等级 == 2) { angle = 282; prize = model.奖品; id = 7; } if (model.奖品等级 == 5) { angle = 337; prize = model.奖品; id = 0; } return Json(new { angle = angle, prize = prize, id = id }); }return Json(data); }
计算概率的部分:
/// <summary> /// 获取抽奖结果 /// </summary> /// <param name="prob">各物品的抽中概率</param> /// <returns>返回抽中的物品所在数组的位置</returns> private static int Get(double[] prob) { int result = 0; int n = (int)(prob.Sum() * 1000); //计算概率总和,放大1000倍 Random r = rnd; float x = (float)r.Next(0, n) / 1000; //随机生成0~概率总和的数字 for (int i = 0; i < prob.Count(); i++) { double pre = prob.Take(i).Sum(); //区间下界 double next = prob.Take(i + 1).Sum(); //区间上界 if (x >= pre && x < next) //如果在该区间范围内,就返回结果退出循环 { result = i; break; } } return result; } private static Random rnd = new Random();
基本上就这些,有不足的地方请各位帮忙补充一下,谢谢大家的阅读。
用户在使用积分进行兑换时,兑吧如何与开发者共同来实现这一功能呢? 兑换流程图 普通商品兑换流程: 虚拟商品兑换流程: 抽奖流程图 扣积分抽奖流程: 扣积分中奖虚拟商品流程: 免费抽奖中虚拟商品流程: 兑换流程详解 当用户发起一个兑换请求时,兑吧服务器会先收到这个请求。然后会依次执行下面的步骤: Step1. 向开发者服务器发起扣除用户积分的请求。 兑吧开始启动兑换流程,向服务器发送扣除用户积分的请
本文向大家介绍php+lottery.js实现九宫格抽奖功能,包括了php+lottery.js实现九宫格抽奖功能的使用技巧和注意事项,需要的朋友参考一下 php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE、火狐、谷歌等浏览器。 引入抽奖插件lottery.js 开始抽奖函数start_lottery() PHP里奖品配置
::: hljs-center 一、会员商品功能介绍 ::: 1、选购开发者: 面向有用户分层运营需求的开发者,例如对普通用户、会员用户、高价值用户群体,在商品兑换上设置不同兑换价格,赋予用户尊享感/价格特权,并引导用户会员等级升级,适合促进用户会员转化、低等级会员升级、开展精细化商品运营的开发者使用。 2、功能说明: ==(1)自定义会员商品== 选择单个在售商品,并配置该商品的可兑换会员等级、
本文向大家介绍慕课网题目之js实现抽奖系统功能,包括了慕课网题目之js实现抽奖系统功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现抽奖系统功能的具体代码,供大家参考,具体内容如下 要求实现功能: 1.点击左侧按键,开始抽奖,点击右侧按键,停止抽奖; 2.敲击回车键,开始抽奖,再次敲击回车键,停止抽奖; 3.开始抽奖后,左侧按钮变色; html: css: JavaScri
本文向大家介绍jQuery实现图片随机切换、抽奖功能(实例代码),包括了jQuery实现图片随机切换、抽奖功能(实例代码)的使用技巧和注意事项,需要的朋友参考一下 效果图: 源代码: HTML: CSS: jquery: 总结 以上所述是小编给大家介绍的jQuery实现图片随机切换、抽奖功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的
本文向大家介绍java实现随机抽取奖品工具类,包括了java实现随机抽取奖品工具类的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了java实现随机抽取奖品工具类的具体代码,供大家参考,具体内容如下 随机抽取奖品 整体思路: 1.奖品集合 + 概率比例集合 2.将奖品按集合中的顺序概率计算成所占比例区间,放入比例集合。并产生一个随机数加入其中,进行排序。 3.排序后随机数落在那个区间就