html抽奖调整中奖率,JS简单实现：根据奖品权重计算中奖概率实现抽奖的方法 _ 惠州SEO...

摘要

//layui模块化引用layui.use([‘jquery’,’util’],function(){var$=layui.$,util=layui.util;//设置奖项名称、权重、中奖次数等数组varprizes=[“一等奖”,

//layui 模块化引用

layui.use(['jquery', 'util'], function(){

var $=layui.$, util= layui.util;

//设置奖项名称、权重、中奖次数等数组

var prizes=["一等奖", "二等奖", "三等奖", "未中奖"]; //奖项名称数组

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

//开发者也可合并声明奖项名称、权重等数组在一个对象中

//var prizes=[

// ,

// ,

// ,

//

//];

//数组累加求和函数：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 ; //返回本次抽奖结果

};

//注册按钮事件

$('.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");

});

});