最近闲下来在做一些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.idevtool.com/

开源demo地址:https://gitee.com/jomingol/lucky

程序员工具站点:草根工具www.idevtool.com

一个简单的大转盘抽奖程序(附.NetCore Demo源码)的更多相关文章

  1. Android Gallery实现3D相册(附效果图+Demo源码)

    今天因为要做一个设置开机画面的功能,主要是让用户可以设置自己的开机画面,应用层需要做让用户选择开机画面图片的功能.所以需要做一个简单的图片浏览选择程序.最后选用Gallery作为基本控件.加入了一些炫 ...

  2. 近期热门微信小程序demo源码下载汇总

    近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...

  3. 纯CSS3大转盘抽奖(响应式、可配置)

    源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘 ...

  4. Java 实现大转盘抽奖

    需要用到 JAVA中的Random()函数 注意:大转盘抽奖各奖项中奖概率之和为 1.奖品列表中的概率为累加概率,需要按照添加进列表的顺序进行累加,添加顺序不做要求. 实际中使用需要考虑奖品数量限制等 ...

  5. jquery——九宫格大转盘抽奖

    一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...

  6. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  7. 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...

  8. 在 Visual Studio 中创建一个简单的 C# 控制台应用程序

    转载:https://blog.csdn.net/qq_43994242/article/details/87260824 快速入门:使用 Visual Studio 创建第一个 C# 控制台应用 h ...

  9. 一个简单的c# 贪吃蛇程序

    一个简单的c#贪吃蛇程序 程序分为界面设计和程序设计:界面设计和程序设计均参考了一些游戏实例,但是所有代码内容是本人编写. 由于看到别人写的程序并没有署名,这里的署名全部都是csdn官网. 游戏界面设 ...

  10. Django 学习笔记之六 建立一个简单的博客应用程序

    最近在学习django时建立了一个简单的博客应用程序,现在把简单的步骤说一下.本人的用的版本是python 2.7.3和django 1.10.3,Windows10系统 1.首先通过命令建立项目和a ...

随机推荐

  1. 调度系统之Airflow

    一.Airflow简介 Airflow 是一个使用 Python 语言编写的 Data Pipeline 调度和监控工作流的平台. Airflow 是通过 DAG(Directed acyclic g ...

  2. HTML5 多媒体

    1.互联网上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了在网页上嵌入音 ...

  3. 全网最适合入门的面向对象编程教程:60 Python面向对象综合实例-传感器数据实时绘图器

    全网最适合入门的面向对象编程教程:60 Python 面向对象综合实例-传感器数据实时绘图器 摘要: 本文将结合之前内容实现模拟一个传感器系统软件,包括三个线程:传感器线程生成数据并通过串口发送给主机 ...

  4. SQL SERVER日常运维巡检系列——数据库备份

    前言 做好日常巡检是数据库管理和维护的重要步骤,而且需要对每次巡检日期.结果进行登记,同时可能需要出一份巡检报告. 本系列旨在解决一些常见的困扰: 不知道巡检哪些东西 不知道怎么样便捷体检 机器太多体 ...

  5. uniapp使用EventBus实现页面间数据传递

    前情 最近在做小程序项目,选用是当前比较火的uniapp技术栈,经常会遇到页面间消息传递的需求. 为什么要这么做? uniapp页面间数据通信方式有很多:通过url传参,状态管理库vuex/pinia ...

  6. 中电金信:技术实践|Flink多线程实现异构集群的动态负载均衡

    导语:Apache Flink是一个框架和分布式处理引擎,用于对无界和有界数据流进行有状态计算.本文主要从实际案例入手并结合作者的实践经验,向各位读者分享当应用场景中异构集群无法做到负载均衡时,如何通 ...

  7. ASP.NET Core EventStream (SSE) 使用以及 WebSocket 比较

    在开发环境中,对于实时数据流的需求非常常见,最常用的技术包括 Server-Sent Events (SSE) 和 WebSocket. 什么是 Server-Sent Events (SSE)? S ...

  8. 利用H2的自定义函数更好的支持测试

    在写DAO层的单元测试时,用mock的写法意义不大,因为DAO层的测试更多的关注是Java对象的传递和生成SQL的正确性,所以需要链接真实的数据库. 但是对于单元测试,真实的数据库是很重的,还要依赖于 ...

  9. Qt编写物联网管理平台47-通用数据库设置

    一.前言 为了做这个通用的数据库组件,专门安装了虚拟机来安装各种版本的不同类型的数据库做测试,包括编译对应的数据库插件,我一直坚信的是一切从实际出发+有实际采用发言权,包括不同Qt版本编译mysql. ...

  10. Qt编写的项目作品29-RTSP播放器+视频监控(海康SDK版本)

    一.功能特点 支持播放视频流和本地MP4文件. 支持句柄和回调两种模式. 多线程显示图像,不卡主界面. 自动重连网络摄像头. 可设置边框大小即偏移量和边框颜色. 可设置是否绘制OSD标签即标签文本或图 ...