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

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

  • 相关阅读:
    web----WSGI
    ovs 实现vlan隔离(一)
    ovs流表机制(四)用vxlan实现不同网段通信
    ovs流表机制(四)用vxlan实现同网段通信
    ovs 流表机制(三)--group表
    ovs 流表机制(二)-OVS流表table之间的跳转
    ovs 流表机制(一)
    euler ironic镜像驱动问题(一)镜像启动失败报dracut initqueue timeout
    ovs流表
    arm64 uefi启动
  • 原文地址:https://www.cnblogs.com/zhangzhixiong/p/5438369.html
Copyright © 2011-2022 走看看