js_lottery
/
js_lottery.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	<title>JS简单实现根据奖品权重计算中奖概率实现抽奖的方法</title>
	<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" />
</head>
<body>
	<section class="layui-col-md10" style="margin: 0 auto; float: none;">
		<div class="layui-card">
			<div class="layui-card-header">JS 根据奖品权重计算中奖概率实现抽奖的方法</div>
			<div class="layui-card-body">
				<div>
					<blockquote class="layui-elem-quote">设置奖项名称：["一等奖", "二等奖", "三等奖", "未中奖"]</blockquote>
					<blockquote class="layui-elem-quote">设置各奖项权重（表征中奖几率）：[1, 5, 20, 74]</blockquote>
				</div>

				<div>
					<blockquote class="layui-elem-quote layui-quote-nm">
						<p class="layui-word-aux">活动规则：</p>
						<div class="rule-body layui-word-aux">
							<p data-sort="0"> 0 < 本次抽奖随机数 <= 1，表示抽中一等奖；</p>
							<p data-sort="1"> 1 < 本次抽奖随机数 <= 5，表示抽中二等奖；</p>
							<p data-sort="2"> 5 < 本次抽奖随机数 <= 20，表示抽中三等奖；</p>
							<p data-sort="3"> 本次抽奖随机数 > 20，表示未中奖。</p>
						</div>
					</blockquote>
					<blockquote class="layui-elem-quote layui-quote-nm">
						<p>本抽奖程序的奖项权重和值：<span id="weightSum">***</span></p>
					</blockquote>

					<blockquote class="layui-elem-quote layui-quote-nm">
						<p>
							<span class="layui-word-aux">您本次抽奖产生的权重随机值：</span>
							<span id="weightRandom">***</span>
						</p>
						<p>
							<span class="layui-word-aux">您本次抽奖结果：</span>
							<span id="printData">***</span>
						</p>
						<p>
							<span class="layui-word-aux">本次抽奖时间：</span>
							<span id="dateNow" class="layui-word-aux"></span>
						</p>
					</blockquote>
				</div>

				<div id="action" class="text-center">
					<button type="button" name="btnSave" class="layui-btn" data-type="save">开始抽奖</button>
					<button type="reset" name="btnReset" class="layui-btn layui-btn-primary" onclick="window.location.reload();">取消</button>
				</div>
			</div>
		</div>
	</section>
	<!--recommended script position-->
	<script type="text/javascript" src="https://www.layuicdn.com/layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript">
		//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(prev ,cuurentValue)
			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);

				//生成一个权重随机数，介于1-100
				var random = Math.random()*weightSum;	//生成一个权重随机数（0到1之间），再乘以权重和值（100），这样得到一个大于等于 0 且小于 100 的随机数
				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");
            });
		});
	</script>
</body>
</html>