JS简单实现:根据奖品权重计算中奖概率实现抽奖的方法

2023-12-25 17:58

本文主要是介绍JS简单实现:根据奖品权重计算中奖概率实现抽奖的方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

本文主要介绍:使用 JS 根据奖品权重计算中奖概率实现抽奖的方法。

一、示例场景

纯爱小说 www.shupu.org
1.1、设置抽奖活动的奖项名称

奖项名称:["一等奖", "二等奖", "三等奖", "未中奖"]。假设抽奖活动设置了这四个奖项,当然开发者可以扩展更多。

var prizes = ["一等奖","二等奖","三等奖","未中奖"];    //奖项名称数组
 1.2、设置各奖项权重

奖项权重:[1, 5, 20, 74]。奖项权重主要用来表征各奖项的中奖几率,这里奖项权重数组的和值为100(=1+5+20+74),其中1表示一等奖的中奖概率为1%;5表示一等奖的中奖概率为5%;20表示三等奖的中奖概率为20%;最后剩下的74表示未中奖的概率为74%。

var prizeWeight = [1, 5, 20, 74];    //奖项权重数组,表征各奖项的中奖机会占总数的百分比。比如一等奖的中奖率是1%,二等奖的中奖率是5%            

如果抽奖活动设置的奖项更多,开发者也可以相应扩展权重数组的和值,比如权重和值为500,1000等,并相应设置数组元素来表征每抽500次,可中多少次、什么等级的奖项。

另外,开发者也可以将奖项名称奖项权重数组合并声明在一个对象中:

//设置奖项名称、权重等数组
var prizes = [{"name": "一等奖", "weight": 1}, {"name": "二等奖", "weight": 5}, {"name": "三等奖", "weight": 20}, {"name": "未中奖", "weight": 74}
];
 1.3、抽奖活动规则
  • 0 < 本次抽奖随机数 <= 1,表示抽中一等奖;
  • 1 < 本次抽奖随机数 <= 5,表示抽中二等奖;
  • 5 < 本次抽奖随机数 <= 20,表示抽中三等奖;
  • 本次抽奖随机数 > 20,表示未中奖。

二、实现原理

因为本文是简单实现,本抽奖程序的原理也设计得较为简单:

  • 根据权重数组的和值(weightSum),在每次抽奖时生成一个权重随机数(weightRandom),这个权重随机数(weightRandom)是介于 0-weightSum (权重和值)之间的,本文示例设置的权重数组和值为100,表示生成的权重随机数是介于 0-100 之间的; 
  • 然后让这个权重随机数(weightRandom)去和权重数组中的所有元素值作比较,计算这个权重随机数(weightRandom)位于哪两个奖项之间,符合哪条中奖规则,对应哪个奖项名称。

比如:某次抽奖生成的权重随机数(weightRandom)为 15.15,按照 1.3 的活动规则,因为 5 < 15.15 <= 20,表示此次生成的权重随机数(weightRandom)可中三等奖。 

下面分别来实现: 

2.1、计算权重和值
//数组累加求和函数:Array.reduce(function(prev ,cuurentValue), initialValue)
var weightSum = prizeWeight.reduce(function(prev, currVal){    //计算权重之和:1+5+20+74=100return prev + currVal;    //prev 是前一次累加后的数值,currVal 是本次待加的数值
}, 0);
 2.2、编写抽奖函数(根据权重和值 weightSum,生成介于0-weightSum之间的权重随机数)
//抽奖函数
var lottery = function(weightSum) {var res = "未中奖";    //默认设置抽奖结果为“未中奖”console.log("本程序的奖项权重和值:", weightSum);//生成一个权重随机数,介于0-weightSum之间var random = Math.random()*weightSum;    //生成一个权重随机数(0 到 weightSum 之间)console.log("本次抽奖的权重随机数:", random);//权重数组重组并排序var concatWeightArr = prizeWeight.concat(random);    //将随机数加入权重数组var sortedWeightArr = concatWeightArr.sort(function(a, b){return a-b;});    //将包含随机数的新权重数组按从小到大(升序)排序console.log("含权重随机数的新权重数组升序排序后:", sortedWeightArr);//索引权重随机数的数组下标var randomIndex = sortedWeightArr.indexOf(random);    //索引随机数在新权重数组中的位置randomIndex = Math.min(randomIndex, prizes.length -1);    //权重随机数的下标不得超过奖项数组的长度-1,重新计算随机数在奖项数组中的索引位置                console.log("本次权重随机数对应的数组下标:", randomIndex);//取出对应奖项res = prizes[randomIndex];    //从奖项数组中取出本次抽奖结果console.log("本次抽奖结果:", res);return {"weightSum": weightSum , "weightRandom": random, prizeIndex: randomIndex, "data": res};    //返回本次抽奖结果
};

需要说明的是:

(1)在抽奖函数中,首先生成一个权重随机数(random),然后将这个权重随机数(random)与原权重数组合并(使用 Array.concat() 函数,返回值是一个新数组,原权重数组不变),生成一个新权重数组,并将新权重数组按照数值从小到大(升序)来排序(使用 Array.sort() 函数);这样,权重随机数(random)按照大小顺序,就会落在某两个奖项权重数值之间。最后索引权重随机数(random)在新权重数组中的下标,就可以取出对应的奖项名称数组中的元素。

(2)比如:某次抽奖函数生成的权重随机数为 15.15,与原来的权重数组:[1, 5, 20, 74] 合并,并排序,将得到新权重数组:[1, 5, 15.15,20, 74],权重随机数(15.15 )落在 5-20 之间,权重随机数(15.15 )在新权重数组中的下标是 2,对应取出奖项名称数组下标为 2 的元素:prizes[2] = "三等奖"。由此判断本次抽奖可中三等奖。

(3)在抽奖函数中,为了确定权重随机数(random)的大小对应何种奖项时,即比较权重随机数与权重数组中各元素数值的大小时,编者没有使用传统的 for 循环来遍历比较权重随机数(random)与 prizeWeight 数组中各元素的大小,而是合并生成新的权重数组并排序,再使用 Array.indexOf() 函数来索引权重随机数(random)的下标,这个下标对应的奖项名称也就取出了。 

三、最后将本示例项目的完整的代码与实现的效果展示出来

3.1、本示例项目JS部分核心代码:
//layui 模块化引用
layui.use(['jquery', 'util'], function(){var $ = layui.$, util = layui.util;//设置奖项名称、权重、中奖次数等数组var prizes = ["一等奖", "二等奖", "三等奖", "未中奖"];    //奖项名称数组var prizeWeight = [1, 5, 20, 74];    //奖项权重数组,表征各奖项的中奖机会占总数的百分比。比如一等奖的中奖率是1%,二等奖的中奖率是5%            //开发者也可合并声明奖项名称、权重等数组在一个对象中//var prizes = [//    {"name": "一等奖", "weight": 1}, //    {"name": "二等奖", "weight": 5}, //    {"name": "三等奖", "weight": 20}, //    {"name": "未中奖", "weight": 74}//];                //数组累加求和函数:Array.reduce(function(prev ,cuurentValue), initialValue)var weightSum = prizeWeight.reduce(function(prev, currVal){    //计算权重之和:1+5+20+74=100return prev + currVal;    //prev 是前一次累加后的数值,currVal 是本次待加的数值}, 0);document.getElementById("weightSum").innerHTML = weightSum;    //设置权重和值//抽奖函数var lottery = function(weightSum) {var res = "未中奖";    //默认设置抽奖结果为“未中奖”console.log("本程序的奖项权重和值:", weightSum);//生成一个权重随机数,介于0-weightSum之间var random = Math.random()*weightSum;    //生成一个权重随机数(0 到 weightSum 之间)console.log("本次抽奖的权重随机数:", random);//权重数组重组并排序var concatWeightArr = prizeWeight.concat(random);    //将随机数加入权重数组var sortedWeightArr = concatWeightArr.sort(function(a, b){return a-b;});    //将包含随机数的新权重数组按从小到大(升序)排序console.log("含权重随机数的新权重数组升序排序后:", sortedWeightArr);//索引权重随机数的数组下标var randomIndex = sortedWeightArr.indexOf(random);    //索引随机数在新权重数组中的位置randomIndex = Math.min(randomIndex, prizes.length -1);    //权重随机数的下标不得超过奖项数组的长度-1,重新计算随机数在奖项数组中的索引位置                console.log("本次权重随机数对应的数组下标:", randomIndex);//取出对应奖项res = prizes[randomIndex];    //从奖项数组中取出本次抽奖结果console.log("本次抽奖结果:", res);return {"weightSum": weightSum , "weightRandom": random, prizeIndex: randomIndex, "data": res};    //返回本次抽奖结果
    };//注册按钮事件$('.layui-btn[data-type="save"]').on('click', function () {var res = lottery(weightSum);document.getElementById("dateNow").innerHTML = util.toDateString(new Date());    //输出本次抽奖时间document.getElementById("weightRandom").innerHTML = res.weightRandom;    //输出本次抽奖的权重随机数document.getElementById("printData").innerHTML = res.data;    //输出本次抽奖结果//重置中奖规则文字的字体颜色    $('.rule-body>p').css("color", "inherit");$('.rule-body>p:eq(' + res.prizeIndex + ')').css("color", "red");});
});
3.2:示例项目页面效果展示:

3.3、示例项目源码已上传至码云仓库

项目地址:https://gitee.com/kexin_front_end/js_lottery

演示地址:https://kexin_front_end.gitee.io/js_lottery/js_lottery.html

结束语

本文介绍的抽奖程序原理仅为 JS 简单实现,适用的场景十分有限,如果遇到需要设计更复杂的抽奖程序,也许开发者需要编写更为健壮、强大、公平、中奖次数可控的算法来实现抽奖函数。

这篇关于JS简单实现:根据奖品权重计算中奖概率实现抽奖的方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/536406

相关文章

使用Java实现通用树形结构构建工具类

《使用Java实现通用树形结构构建工具类》这篇文章主要为大家详细介绍了如何使用Java实现通用树形结构构建工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录完整代码一、设计思想与核心功能二、核心实现原理1. 数据结构准备阶段2. 循环依赖检测算法3. 树形结构构建4. 搜索子

MySQL多列IN查询的实现

《MySQL多列IN查询的实现》多列IN查询是一种强大的筛选工具,它允许通过多字段组合快速过滤数据,本文主要介绍了MySQL多列IN查询的实现,具有一定的参考价值,感兴趣的可以了解一下... 目录一、基础语法:多列 IN 的两种写法1. 直接值列表2. 子查询二、对比传统 OR 的写法三、性能分析与优化1.

在C#中调用Python代码的两种实现方式

《在C#中调用Python代码的两种实现方式》:本文主要介绍在C#中调用Python代码的两种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#调用python代码的方式1. 使用 Python.NET2. 使用外部进程调用 Python 脚本总结C#调

Python实现自动化接收与处理手机验证码

《Python实现自动化接收与处理手机验证码》在移动互联网时代,短信验证码已成为身份验证、账号注册等环节的重要安全手段,本文将介绍如何利用Python实现验证码的自动接收,识别与转发,需要的可以参考下... 目录引言一、准备工作1.1 硬件与软件需求1.2 环境配置二、核心功能实现2.1 短信监听与获取2.

使用Python实现获取网页指定内容

《使用Python实现获取网页指定内容》在当今互联网时代,网页数据抓取是一项非常重要的技能,本文将带你从零开始学习如何使用Python获取网页中的指定内容,希望对大家有所帮助... 目录引言1. 网页抓取的基本概念2. python中的网页抓取库3. 安装必要的库4. 发送HTTP请求并获取网页内容5. 解

SpringBoot如何通过Map实现策略模式

《SpringBoot如何通过Map实现策略模式》策略模式是一种行为设计模式,它允许在运行时选择算法的行为,在Spring框架中,我们可以利用@Resource注解和Map集合来优雅地实现策略模式,这... 目录前言底层机制解析Spring的集合类型自动装配@Resource注解的行为实现原理使用直接使用M

Python实现Microsoft Office自动化的几种方式及对比详解

《Python实现MicrosoftOffice自动化的几种方式及对比详解》办公自动化是指利用现代化设备和技术,代替办公人员的部分手动或重复性业务活动,优质而高效地处理办公事务,实现对信息的高效利用... 目录一、基于COM接口的自动化(pywin32)二、独立文件操作库1. Word处理(python-d

Java时间轮调度算法的代码实现

《Java时间轮调度算法的代码实现》时间轮是一种高效的定时调度算法,主要用于管理延时任务或周期性任务,它通过一个环形数组(时间轮)和指针来实现,将大量定时任务分摊到固定的时间槽中,极大地降低了时间复杂... 目录1、简述2、时间轮的原理3. 时间轮的实现步骤3.1 定义时间槽3.2 定义时间轮3.3 使用时

使用Python实现网络设备配置备份与恢复

《使用Python实现网络设备配置备份与恢复》网络设备配置备份与恢复在网络安全管理中起着至关重要的作用,本文为大家介绍了如何通过Python实现网络设备配置备份与恢复,需要的可以参考下... 目录一、网络设备配置备份与恢复的概念与重要性二、网络设备配置备份与恢复的分类三、python网络设备配置备份与恢复实

Java 中实现异步的多种方式

《Java中实现异步的多种方式》文章介绍了Java中实现异步处理的几种常见方式,每种方式都有其特点和适用场景,通过选择合适的异步处理方式,可以提高程序的性能和可维护性,感兴趣的朋友一起看看吧... 目录1. 线程池(ExecutorService)2. CompletableFuture3. ForkJoi