最近項目需求的一個抽獎功能給整理了下，語言表達能力不好，寫的不好請勿吐槽，一笑而過就好。好了下面開始說說這個抽獎功能。因為涉及到公司的項目所以一些敏感的地方均已中文代替。
首先在后臺添加獎品的名稱以及概率如圖：
后臺代碼沒什么好說的，我們來看看前端代碼。
通過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();基本上就這些，有不足的地方請各位幫忙補充一下，謝謝大家的閱讀。
新聞熱點
疑難解答
