C# MVC模式下商品抽獎(jiǎng)功能實(shí)現(xiàn)
最近項(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ǔ)充一下,謝謝大家的閱讀。
上一篇:詳解C#中的定時(shí)器Timer類及其垃圾回收機(jī)制
欄 目:C#教程
本文標(biāo)題:C# MVC模式下商品抽獎(jiǎng)功能實(shí)現(xiàn)
本文地址:http://www.jygsgssxh.com/a1/C_jiaocheng/6542.html
您可能感興趣的文章
- 01-10WinForm實(shí)現(xiàn)仿視頻播放器左下角滾動(dòng)新聞效果的方法
- 01-10C#實(shí)現(xiàn)多線程下載文件的方法
- 01-10WinForm實(shí)現(xiàn)自定義右下角提示效果的方法
- 01-10C#使用Dispose模式實(shí)現(xiàn)手動(dòng)對(duì)資源的釋放
- 01-10Winform消除button按下出現(xiàn)的虛線簡單實(shí)現(xiàn)方法
- 01-10深入淺出23種設(shè)計(jì)模式
- 01-10C#日歷樣式的下拉式計(jì)算器實(shí)例講解
- 01-10實(shí)現(xiàn)ASP.NET無刷新下載并提示下載完成的開發(fā)思路
- 01-10C#編程和Visual Studio使用技巧(下)
- 01-10C#中的 == 和equals()區(qū)別淺析


閱讀排行
本欄相關(guān)
- 01-10C#通過反射獲取當(dāng)前工程中所有窗體并
- 01-10關(guān)于ASP網(wǎng)頁無法打開的解決方案
- 01-10WinForm限制窗體不能移到屏幕外的方法
- 01-10WinForm繪制圓角的方法
- 01-10C#實(shí)現(xiàn)txt定位指定行完整實(shí)例
- 01-10WinForm實(shí)現(xiàn)仿視頻播放器左下角滾動(dòng)新
- 01-10C#停止線程的方法
- 01-10C#實(shí)現(xiàn)清空回收站的方法
- 01-10C#通過重寫Panel改變邊框顏色與寬度的
- 01-10C#實(shí)現(xiàn)讀取注冊表監(jiān)控當(dāng)前操作系統(tǒng)已
隨機(jī)閱讀
- 04-02jquery與jsp,用jquery
- 01-11ajax實(shí)現(xiàn)頁面的局部加載
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 01-10C#中split用法實(shí)例總結(jié)
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 08-05織夢dedecms什么時(shí)候用欄目交叉功能?
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 01-10delphi制作wav文件的方法
- 01-10使用C語言求解撲克牌的順子及n個(gè)骰子


