热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

JS根据奖品权重计算中奖概率

这篇文章主要介绍了JS计算中奖概率实现抽奖的方法,对算法感兴趣的同学,可以参考下

一、示例场景

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=100
    return 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)的下标,这个下标对应的奖项名称也就取出了。

三、项目完整代码

本示例项目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=100
        return 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");
    });
});

以上就是JS根据奖品权重计算中奖概率的详细内容,更多关于JS计算中奖概率的资料请关注其它相关文章!


推荐阅读
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 本文介绍了解决IE678伪类不兼容问题的方法,包括少用CSS3和HTML5独有的属性,使用CSS hacker,使用last-child清除浮动、批量添加标签、去掉list item最后一个的border-right等技巧。同时还介绍了使用after清除浮动时加上IE独有属性zoom:1的处理方法。另外,本文还提到可以使用jQuery代替批量添加标签的功能,以及使用负边距和CSS2选择器element+element去掉list item最后一个的border-right的方法。 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • Webpack5内置处理图片资源的配置方法
    本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
  • HDU 2372 El Dorado(DP)的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]
  • 本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • Mac OS 升级到11.2.2 Eclipse打不开了,报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ... [详细]
author-avatar
林林7089
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有