JS簡單實現:根據獎品權重計算中獎概率實現抽獎的方法

来源:https://www.cnblogs.com/redpocket/archive/2019/12/25/js_lottery.html
-Advertisement-
Play Games

本文主要介紹:使用 JS 根據獎品權重計算中獎概率實現抽獎的方法。 一、示例場景 1.1、設置抽獎活動的獎項名稱 獎項名稱:["一等獎", "二等獎", "三等獎", "未中獎"]。假設抽獎活動設置了這四個獎項,當然開發者可以擴展更多。 var prizes = ["一等獎","二等獎","三等獎" ...


本文主要介紹:使用 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)的下標,這個下標對應的獎項名稱也就取出了。 

三、最後將本示例項目的完整的代碼與實現的效果展示出來

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=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");
    });
});

3.2:示例項目頁面效果展示:

3.3、示例項目源碼已上傳至碼雲倉庫

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

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

結束語

本文介紹的抽獎程式原理僅為 JS 簡單實現,適用的場景十分有限,如果遇到需要設計更複雜的抽獎程式,也許開發者需要編寫更為健壯、強大、公平、中獎次數可控的演算法來實現抽獎函數。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 第一章:熟悉 第1條:瞭解 語言的起源 第2條:在類的頭文件中儘量少引入其他頭文件 背景: 使用 可以引入其他文件的所有介面細節。 問題: 1. .h頭文件中,在編譯一個使用了某類的文件時,不需要知道這個類的全部細節,只需要知道有這個類就好。 2. A頭文件中引入B頭文件,C頭文件引入A頭文件,就會 ...
  • 更多文章請點擊:http://77blogs.com/?p=170 轉載請標明出處:https://www.cnblogs.com/tangZH/p/12088332.html,http://77blogs.com/?p=170 使用場景一: 現在要執行兩個任務: 1、輸出字元串0 2、輸出字元串1 ...
  • JS高級 學習roadmap 5 parts part 1-3 part 4-5 ...
  • 案例:無刷新評論 屬於創建對象的案例拿出來複習 創建行和單元格,添加到相應元素中,設置內容 createElement, appendChild,innerHTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit ...
  • btkitty 知名的BT磁力搜索,資源很多,中文友好 btdb 知名的BT磁力搜索,資源很多,中文友好 838888 不錯的 BT 磁力搜索引擎,資源很多,中文友好 idope.se 資源豐富的BT磁力搜索,並且大多數速度下載快 zooqle 知名 bt 種子磁力搜索引擎 飛客 BT 界面簡潔美觀 ...
  • 介紹 AntColony(Github)是findit磁力搜索引擎的核心。用來在DHT網路中,收集活躍資源的infohash,下載並解析資源的種子文件,存入資料庫等。AntColony是若幹功能的合集,也可以單獨運行其中的部分功能,所以起“蟻群”這個名字也是很貼切的(沒錯,我就是愛動物世界)。主要分 ...
  • 初始前端 一、奪命三問 理論知識 二、HTTP協議 四大特性 數據格式 響應狀態碼 三、HTML 超文本標記語言 html註釋 第一個HTML代碼 四、head內常用的標簽 常用標簽 五、body內常用標簽 常用標簽 body類常用標簽 常用標簽1 常用標簽2 六、列表標簽 列表標簽 列表標簽 七、 ...
  • 第一步: 第二步: 第三步: 打開vue.json文件後,如果是初次設置,應該如下圖所示,綠色註釋部分不用管,註意那兩個白色大括弧 第四步:在大括弧內全部粘貼如下代碼,保存即可完成vue模板的設置 "Print to vue": { "prefix": "vue", "body": [ "<temp ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...