zoukankan      html  css  js  c++  java
  • C# MVC模式下商品抽奖

        很久没有写博客,于是就把最近项目需求的一个抽奖功能给整理了下,语言表达能力不好,写的不好请勿吐槽,一笑而过就好。好了下面开始说说这个抽奖功能。因为涉及到公司的项目所以一些敏感的地方均已中文代替。

      首先在后台添加奖品的名称以及概率如图:

    后台代码没什么好说的,我们来看看前端代码。

      通过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();

         基本上就这些,有不足的地方请各位帮忙补充一下,谢谢

      下面附上demo地址:http://files.cnblogs.com/files/zhangzhixiong/LuckdrawdDome.zip

      有不足的地方望大家指出,谢谢,我会即时完善

  • 相关阅读:
    python 并发编程 多线程 event
    python 并发编程 多线程 定时器
    python 并发编程 多线程 信号量
    linux top 查看CPU命令
    python 并发编程 多线程 GIL与多线程
    python 并发编程 多线程 死锁现象与递归锁
    python 并发编程 多线程 GIL与Lock
    python GIL全局解释器锁与互斥锁 目录
    python 并发编程 多线程 GIL全局解释器锁基本概念
    执行python程序 出现三部曲
  • 原文地址:https://www.cnblogs.com/zhangzhixiong/p/5438369.html
Copyright © 2011-2022 走看看