C# MVC模式下商品抽獎(jiǎng)功能實(shí)現(xiàn)
更新時(shí)間：2016年04月27日 16:21:09 作者：熊灬孩灬子
這篇文章主要為大家分享了C#在MVC模式下實(shí)現(xiàn)商品抽獎(jiǎng)功能，思路清晰，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
最近項(xiàng)目需求的一個(gè)抽獎(jiǎng)功能給整理了下，語言表達(dá)能力不好，寫的不好請(qǐng)勿吐槽，一笑而過就好。好了下面開始說說這個(gè)抽獎(jiǎng)功能。因?yàn)樯婕暗焦镜捻?xiàng)目所以一些敏感的地方均已中文代替。
首先在后臺(tái)添加獎(jiǎng)品的名稱以及概率如圖：
后臺(tái)代碼沒什么好說的，我們來看看前端代碼。
通過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>
這里要注意切圖時(shí)候的角度。不然旋轉(zhuǎn)后所對(duì)應(yīng)的角度就不對(duì)了。
下面給抽獎(jiǎng)的指針添加點(diǎn)擊事件：
function rotate() {
$.ajax({
type: 'POST',
url: '/控制器/方法',
dataType: 'json',
cache: false,
error: function () {
alert('出錯(cuò)了！');
return false;
},
success: function (data) {
if (data == 1 || data == -3) {
var bRotate = true;
if (data == 1) {
alert("請(qǐng)登錄!");
}if (data == -3) {
alert("對(duì)不起，您的獎(jiǎng)券不足!")
}
}
else {
var angles = parseInt(data.angle); //角度
var txt = data.prize; //獎(jiǎng)項(xiàng)
var awards = parseInt(data.id);
var bRotate = false; //如果bRotate為 true 的時(shí)候無法點(diǎn)擊
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 三個(gè)參數(shù)均為后臺(tái)傳出，0,337 為轉(zhuǎn)盤旋轉(zhuǎn)所對(duì)應(yīng)的角度，最后一個(gè)則為商品名稱
rotateFn_method(0, 337, '獎(jiǎng)品名稱');
break;
case 1:
//var angle = [88, 137, 185, 235, 287];
rotateFn_method(1, 26, '獎(jiǎng)品名稱');
break;
case 2:
//var angle = [137, 185, 235, 287];
rotateFn_method(2, 88, '獎(jiǎng)品名稱');
break;
case 3:
//var angle = [137, 185, 235, 287];
rotateFn_method(3, 137, '獎(jiǎng)品名稱');
break;
case 4:
//var angle = [185, 235, 287];
rotateFn_method(4, 185, '獎(jiǎng)品名稱');
break;
case 5:
//var angle = [185, 235, 287];
rotateFn_method(5, 235, '獎(jiǎng)品名稱');
break;
case 6:
//var angle = [235, 287];
rotateFn_method(6, 235, '獎(jiǎng)品名稱');
break;
case 7:
//var angle = [287];
rotateFn_method(7, 282, '獎(jiǎng)品名稱');
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;
}
})
};
//刷新當(dāng)前頁面
function locateEnd() {
window.location.reload();
}
這樣頁面的轉(zhuǎn)盤就可以旋轉(zhuǎn)以及彈出獎(jiǎng)品了，js中注釋應(yīng)該比較明確，我就不多對(duì)js進(jìn)行解釋了，下面來說說控制器里計(jì)算概率的邏輯，之所以不把概率計(jì)算寫在js中，是因?yàn)閖s文件容易被篡改，想必大家都知道。話不多說，下面上代碼：
//判斷用戶是否登錄
if (admin != null)
{
//獲取后臺(tái)設(shè)置的數(shù)據(jù)，見圖1
var LdList = hr.LuckdrawList();
//因?yàn)樯婕暗焦镜捻?xiàng)目所有一些敏感地方均已中文代替
List<double> dt = LdList.Select(i => i.概率).ToList();
//創(chuàng)建一個(gè)數(shù)值
double[] Array = dt.ToArray();
//角度
int angle = 0;
//獎(jiǎng)品
var prize = "";
var id = 0;
//將概率放入數(shù)值，調(diào)用下面的Get方法計(jì)算出所返回的概率位于數(shù)值中的第幾位
var Pl = Get(Array);
//獲取獎(jiǎng)品表中位于Pl的產(chǎn)品
var model = LdList[Pl];
// id , angle 角度 prize 獎(jiǎng)品
if (model.獎(jiǎng)品等級(jí) == 1)
{
angle = 26;
prize = model.獎(jiǎng)品;
id = 1;
}
if (model.獎(jiǎng)品等級(jí) == 7)
{
angle = 88;
prize = model.獎(jiǎng)品;
id = 2;
}
if (model.獎(jiǎng)品等級(jí) == 4)
{
angle = 137;
prize = model.獎(jiǎng)品;
id = 3;
}
if (model.獎(jiǎng)品等級(jí) == 3)
{
angle = 185;
prize = model.獎(jiǎng)品;
id = 4;
}
if (model.獎(jiǎng)品等級(jí) == 6)
{
angle = 235;
prize = model.獎(jiǎng)品;
id = 5;
}
if (model.獎(jiǎng)品等級(jí) == 2)
{
angle = 282;
prize = model.獎(jiǎng)品;
id = 7;
}
if (model.獎(jiǎng)品等級(jí) == 5)
{
angle = 337;
prize = model.獎(jiǎng)品;
id = 0;
}
return Json(new { angle = angle, prize = prize, id = id });
}return Json(data);
}
計(jì)算概率的部分：
/// <summary>
/// 獲取抽獎(jiǎng)結(jié)果
/// </summary>
/// <param name="prob">各物品的抽中概率</param>
/// <returns>返回抽中的物品所在數(shù)組的位置</returns>
private static int Get(double[] prob)
{
int result = 0;
int n = (int)(prob.Sum() * 1000); //計(jì)算概率總和，放大1000倍
Random r = rnd;
float x = (float)r.Next(0, n) / 1000; //隨機(jī)生成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();
基本上就這些，有不足的地方請(qǐng)各位幫忙補(bǔ)充一下，謝謝大家的閱讀。
您可能感興趣的文章:
- PHP MVC模式在網(wǎng)站架構(gòu)中的實(shí)現(xiàn)分析
- PHP中MVC模式的模板引擎開發(fā)經(jīng)驗(yàn)分享
- 關(guān)于php mvc開發(fā)模式的感想
- PHP的MVC模式實(shí)現(xiàn)原理分析（一相簡(jiǎn)單的MVC框架范例）
- C# MVC模式中應(yīng)該怎樣區(qū)分應(yīng)用程序邏輯（Controller層）和業(yè)務(wù)邏輯（Model層）?
- 淺談使用MVC模式進(jìn)行JavaScript程序開發(fā)
- 基于C#實(shí)現(xiàn)簡(jiǎn)單的隨機(jī)抽獎(jiǎng)小程序
- C#實(shí)例代碼之抽獎(jiǎng)升級(jí)版可以經(jīng)表格數(shù)據(jù)導(dǎo)入數(shù)據(jù)庫，抽獎(jiǎng)設(shè)置，補(bǔ)抽
相關(guān)文章
這篇文章主要介紹了C#實(shí)現(xiàn)矩陣轉(zhuǎn)置的方法,實(shí)例分析了C#針對(duì)矩陣運(yùn)算的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
C# L型棋牌覆蓋實(shí)現(xiàn)代碼與效果，需要的朋友可以參考一下2013-04-04
這篇文章主要介紹了c#窗體傳值用法,以實(shí)例形式較為詳細(xì)的分析了C#窗體傳值的各種常用技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了關(guān)于C語言理解裝箱與拆箱的相關(guān)資料,需要的朋友可以參考下面文章內(nèi)容2021-09-09
在C#中所有方法都必須在一個(gè)類的內(nèi)部聲明,然而如果把一個(gè)方法或字段聲明為Static,就可以使用類名來調(diào)用方法或訪問字段,下面這篇文章主要給大家介紹了關(guān)于C#中static詳細(xì)用法的相關(guān)資料,需要的朋友可以參考下2022-12-12
關(guān)于C#生成MongoDB中ObjectId的實(shí)現(xiàn)方法
本篇文章小編為大家介紹,關(guān)于C#生成MongoDB中ObjectId的實(shí)現(xiàn)方法。需要的朋友參考下2013-04-04
最常用的序列化是把某個(gè)類序列化成二進(jìn)制文件.但有時(shí)我們也會(huì)把類序列化成xml文件,需要的朋友可以參考下2012-11-11
C# 復(fù)制指定節(jié)點(diǎn)的所有子孫節(jié)點(diǎn)到新建的節(jié)點(diǎn)下
這篇文章主要介紹了C# 復(fù)制指定節(jié)點(diǎn)的所有子孫節(jié)點(diǎn)到新建的節(jié)點(diǎn)下的相關(guān)資料,非常不錯(cuò)具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10
這篇文章主要介紹了C# 使用HttpClient模擬請(qǐng)求的案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
C#實(shí)現(xiàn)文件與二進(jìn)制互轉(zhuǎn)并存入數(shù)據(jù)庫
這篇文章主要介紹了C#實(shí)現(xiàn)文件與二進(jìn)制互轉(zhuǎn)并存入數(shù)據(jù)庫,本文直接給出代碼實(shí)例,代碼中包含詳細(xì)注釋,需要的朋友可以參考下2015-06-06