首页 > 编程 > C# > 正文

C# MVC模式下商品抽奖功能实现

2020-01-24 01:10:55
字体:
来源:转载
供稿:网友

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

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

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

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

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表