最近项目需求的一个抽奖功能给整理了下，语言表达能力不好，写的不好请勿吐槽，一笑而过就好。好了下面开始说说这个抽奖功能。因为涉及到公司的项目所以一些敏感的地方均已中文代替。
首先在后台添加奖品的名称以及概率如图：
后台代码没什么好说的，我们来看看前端代码。
通过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();
基本上就这些，有不足的地方请各位帮忙补充一下，谢谢大家的阅读。
dy("nrwz");
查看更多关于C# MVC模式下商品抽奖功能实现的详细内容...