C# MVC模式下商品抽獎功能實現(xiàn)

來源：本站原創(chuàng)|時間：2020-01-10|欄目：C#教程|點擊：次

最近項目需求的一個抽獎功能給整理了下，語言表達能力不好，寫的不好請勿吐槽，一笑而過就好。好了下面開始說說這個抽獎功能。因為涉及到公司的項目所以一些敏感的地方均已中文代替。

首先在后臺添加獎品的名稱以及概率如圖：

后臺代碼沒什么好說的，我們來看看前端代碼。

通過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>

這里要注意切圖時候的角度。不然旋轉(zhuǎn)后所對應的角度就不對了。

下面給抽獎的指針添加點擊事件：

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 三個參數(shù)均為后臺傳出，0,337  為轉(zhuǎn)盤旋轉(zhuǎn)所對應的角度，最后一個則為商品名稱

              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;
          }
        }

      }
    });
  }

　　//旋轉(zhuǎn)事件
  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();
  }

　　這樣頁面的轉(zhuǎn)盤就可以旋轉(zhuǎn)以及彈出獎品了，js中注釋應該比較明確，我就不多對js進行解釋了，下面來說說控制器里計算概率的邏輯，之所以不把概率計算寫在js中，是因為js文件容易被篡改，想必大家都知道。話不多說，下面上代碼：　　

//判斷用戶是否登錄 
      if (admin != null)
      {
　　　　　　　　　//獲取后臺設置的數(shù)據(jù)，見圖1
        var LdList = hr.LuckdrawList();
　　　　　　　　　//因為涉及到公司的項目所有一些敏感地方均已中文代替
        List<double> dt = LdList.Select(i => i.概率).ToList();
　　　　　　　　　//創(chuàng)建一個數(shù)值
        double[] Array = dt.ToArray();
        //角度
        int angle = 0;
        //獎品
        var prize = "";
        var id = 0;
　　　　　　　　　//將概率放入數(shù)值，調(diào)用下面的Get方法計算出所返回的概率位于數(shù)值中的第幾位
        var Pl = Get(Array);
　　　　　　　　　//獲取獎品表中位于Pl的產(chǎn)品
        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>
    /// 獲取抽獎結(jié)果
    /// </summary>
    /// <param name="prob">各物品的抽中概率</param>
    /// <returns>返回抽中的物品所在數(shù)組的位置</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~概率總和的數(shù)字

      for (int i = 0; i < prob.Count(); i++)
      {
        double pre = prob.Take(i).Sum();     //區(qū)間下界
        double next = prob.Take(i + 1).Sum();  //區(qū)間上界
        if (x >= pre && x < next)        //如果在該區(qū)間范圍內(nèi)，就返回結(jié)果退出循環(huán)
        {
          result = i;
          break;
        }
      }
      return result;
    }
    private static Random rnd = new Random();

基本上就這些，有不足的地方請各位幫忙補充一下，謝謝大家的閱讀。

上一篇：詳解C#中的定時器Timer類及其垃圾回收機制

欄目：C#教程

下一篇：C#中ZipHelper 壓縮和解壓幫助類

本文標題：C# MVC模式下商品抽獎功能實現(xiàn)

本文地址：http://mengdiqiu.com.cn/a1/C_jiaocheng/6542.html

更多C#教程

欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

C#教程

C# MVC模式下商品抽獎功能實現(xiàn)

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機閱讀