最近闲下来在做一些demo,现在讲一下做的一个简单的大转盘抽奖demo,前端lottery,layui,后端.net core,sqlsugar,数据库用的mysql
1.前端实现:
前端用的是基于开源的lottery,其中有些改动的,使得前端可以自适应pc端和手机端浏览器,以下是前端js调用实现:
var accountId = 1;
var lottery = new LotteryDial(document.getElementById('luckPointer'),
{ // eslint-disable-line
speed: 30, // 每帧速度
areaNumber: 8, // 奖区数量
circleNumber: 5 //旋转圈数
});
var index = -1;
var luckProduct = {};
lottery.on('start',
function() {
// 请求获取中奖结果
$.ajax({
url: '@Url.Action("GetLuckyResult")',
dataType: 'json',
type: 'post',
async :false,
data: { accountId: accountId, ran: Math.random() }
}).done(function(d) {
if (d.code === 0) {
console.log('剩余次数为0');
}
if (d.code === 1) {
console.log(d.data);
index = parseInt(d.data.luckyIndex);
luckProduct = d.data;
lottery.setResult(index);
}
});
// 假如请求出错
// setTimeout(function () {
// lottery.reset()
// }, 1000)
});
lottery.on('end',
function() {
console.log('中奖奖区:' + index);
if (luckProduct != null && luckProduct.isLucky) {
layer.msg('恭喜您中奖了,你将获得了:' + luckProduct.productName);
} else {
layer.msg('谢谢参与!');
}
});2.后端逻辑实现
后端用的简单算法,步骤如下
a.根据奖品概率构造一个区间
b.通过随机数Rondom的API获取随机值 [0, 最大值)
c.根据随机值匹配到对应区间的奖品,即是抽取到的奖品
代码实现如下:
public async Task<LuckyProduct> GetLuckyAction(int accountId)
{
var res = new LuckyProduct();
try
{
var allow = Db.Queryable<LuckyAccount>().Where(e => e.AccountId == accountId).First();
if (allow == null || allow.AllowCount <= 0)
return await Task.Run(() => res);
bool isSaveAction = LuckyActionDb.Insert(new LuckyAction()
{
AccountId = accountId,
LuckyAccount = "test",
CreatedAt = DateTime.Now
});
if (isSaveAction)
{
allow.AllowCount = allow.AllowCount - 1;
bool isUpdateAllow =
LuckyAccountDb.Update(allow);
if (isUpdateAllow)
{
var list = LuckyProductDb.GetList(e => e.ProductStatus == 1 && e.ProductStore > 0);
if (list != null && list.Count > 0)
{
res = list.Find(e => e.IsLucky == 0);
Random r = new Random();
int index = r.Next(1, 100);
foreach (LuckyProduct t in list)
{
if (t.ProductLuckyRateMin <= index && t.ProductLuckyRateMax >= index)
{
res = t;
}
}
if (res != null && res.IsLucky == 1)
{
res.ProductStore = res.ProductStore - 1;
LuckyProductDb.Update(res);
LuckyResultDb.Insert(new LuckyResult()
{
AccountId = accountId,
CreatedAt = DateTime.Now,
LuckyAccount = "test",
ProductCode = res.ProductCode,
ProductId = res.ProductId,
ProductName = res.ProductName
});
}
}
}
}
}
catch (Exception ex)
{
}
return await Task.Run(() => res);
}预览地址:http://lucky.iyuanma.cc/
开源demo地址:https://gitee.com/jomingol/lucky
程序员工具站点:程序员工具箱www.idevtool.com
2