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

　　有不足的地方望你們指出，謝謝，我會即時完善