JavaScript双色球抽奖_js选号摇奖-CSDN博客

本文链接：https://blog.csdn.net/chaichai_0810/article/details/124574323

根据双色球摇奖规则，随机产生6个红球，范围1-33；随机产生1个蓝球，范围1-16。并将随机产生的6个红球号码和1个蓝球号码在控制台输出。

选择好号码后将号码排序，选择下注次数，点击下注，控制台将会把选择的号码与控制台随机生成的号码对比，得出结果并在控制台输出。

奖级	中奖条件
一等奖	6个红球和1个蓝球全部相同
二等奖	选中6个红球
三等奖	选中5个红球和一个蓝球
四等奖	选中5个红球或者4个红球加一个蓝球
五等奖	选中4个红球或者3个红球加一个蓝球
六等奖	选中1个蓝球

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双色球</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			li {
				list-style-type: none
			}

			#box {
				display: fiex;
				flex-direction: column;
				align-items: center;
			}

			#box li {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				margin-top: 10px;
				margin-left: 20px;
				text-align: center;
				line-height: 50px;
				color: #fff;
			}

			.red {
				background: red;
			}

			.blue {
				background: blue;
			}

			#redbox,
			#bluebox,
			#selectedbox {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
			}

			.selected,
			.blueselected {
				border: 3px solid black;
			}
		</style>
	</head>
	<body>
		<div id="box">
             //红球放置区域
			<div id="redbox"></div>
            //蓝球放置区域
			<div id='bluebox'></div>
            //选择号码放置区域
			<div id="selectedbox"></div>
			<div>
				<input type="text" id="num"/>
				<button id="btn">点击下注</button>

			</div>
		</div>
	</body>
	<script src="./js/index1.js"></script>
	<script>
		init()
	</script>
</html>

JavaScript代码：

//产生指点范围内的随机数
function getRandom(rand) {
	return Math.ceil(Math.random() * rand);
}

function init() {
	//初始化节点
	let node, //用户接受getboll()方法产生的节点 尽可能不要在循环创建变量
		redbox = document.getElementById("redbox"), //获取页面红球盒子
		bluebox = document.getElementById("bluebox"); //过去页面蓝球盒子
	for (let i = 1; i < 34; i++) { //循环产生红球
		node = getboll("red", i);
		redbox.append(node);
		node.addEventListener("click", redclick)
	}
	for (let i = 1; i < 17; i++) { //循环产生蓝球
		node = getboll("blue", i);
		bluebox.append(node);
		node.addEventListener("click", blueclick)
	}
}
//红球点击事件
function redclick() {
	let isOk = this.className;
	if (isOk.indexOf("selected") == -1) { //如果红球没有被选中
		//如果红球的数量已经有了6个 则阻断程序 不再执行后续代码
		if (document.querySelectorAll("#redbox>.selected").length == 6) return;
		//修改当前被点击的红球，为该球添加被选中样式
		this.className = "red selected";
		//将红球插入中间盒子
		insertalrad(this, 1, ".red");
	} else {
		this.className = "red";
		//将该红球从被选中盒子中删除
		insertalrad(this, 2, ".red");
	}
}
//蓝球点击事件
function blueclick() {
	//获取页面中所有蓝球
	let nodes = document.querySelectorAll("#bluebox>.blue");
	//循环所有蓝球 取消被选中的样式
	for (let n of nodes) {
		n.className = "blue";
	}
	//让当前被点击的蓝球增加被选中的样式
	this.className = "blue blueselected";
	//将当前蓝球添加或替换到被选到的盒子中
	insertalrad(this, 3, ".blue");
}
//产生球球
function getboll(color, text) {
	let node = document.createElement("li")
	node.className = color;
	node.innerText = text;
	return node;
}
//将选中的球存入盒中 type= 1 添加 =2删除 =3替换
function insertalrad(node, type, color) {
	//复制一份传入节点
	let newNode = node.cloneNode(true);
	if (type === 1) {
		//将被复制的节点存入被选中盒子的最开始位置
		document.getElementById("selectedbox").prepend(newNode);
		//获取被选中盒子中所有红球
		let nodes = document.querySelectorAll("#selectedbox>" + color);
		//该组中紧紧存放所有被选中红球的数字 用于排序过渡
		let arrNum = [];
		//将所有红球的数字存入数组
		for (let i of nodes) {
			arrNum.push(parseInt(i.innerText))
		}
		//对数组进行升序排列
		arrNum.sort((v1, v2) => {
			return v1 - v2;
		})
		//因为数组中的数字个数一定会和被选中的红球个数一致 把所有排序好的数字逐一替换
		//红球中的数组 造成排序视觉
		for (let i in nodes) {
			nodes[i].innerText = arrNum[i];
		}
	} else if (type === 2) {
		//如果type==2表示移除红球
		//获取所有选中红球
		let nodes = document.querySelectorAll("#selectedbox>" + color);
		//通过循环所有红球找到对应的被移除的红球数字
		for (let i of nodes) {
			//若果当前被循环的节点数字和传入红球数字一致
			if (node.innerText == i.innerText) {
				//移除对应红球
				//removeChild删除元素中对应子节点
				document.getElementById("selectedbox").removeChild(i);
				//移除后应该跳出循环 避免循环继续执行
				break;
			}
		}
	} else {
		//如果存在蓝球 则替换
		//如果被选中蓝球数量>=1 则替换蓝球数字
		if (document.querySelectorAll("#selectedbox>" + color).length >= 1) {
			document.querySelectorAll("#selectedbox>" + color)[0].innerText = node.innerText;
		} else {
			//否则添加一个蓝球
			document.getElementById("selectedbox").append(newNode);
		}
	}
}

function getDoubl() {
	//存放7位双色球
	let boll = [],
		num;
	//产生第7位的蓝球数字
	boll[0] = getRandom(33)
	for (let i = 1; i < 6; i++) {
		while (true) {
			num = getRandom(33);
			if (boll.indexOf(num) == -1) {
				//表示该数字中不存在该随机数
				boll[i] = num;
				break;
			}
		}
	}
    //将红球排序
	boll.sort((a1, a2) => {
		return a1 - a2;
	});
	boll[6] = getRandom(16);
	return boll;
}
console.log(getDoubl());

//点击按钮 开奖
document.getElementById("btn").onclick = function() {
	//获取开奖号码
	let node = document.querySelectorAll("#selectedbox>li"),
		kaijiang = [];
	for (let n of node) {
		kaijiang.push(n.innerText);
	}
	let num = parseInt(document.getElementById("num").value),
		boll;
	let red = blue = 0;

	for (let i = 0; i < num; i++) {
		red = blue = 0;
		boll = getDoubl();

		for (let k = 0; k < boll.length - 1; k++) {

			for (let v = 0; v < kaijiang.length - 1; v++) {
				if (boll[k] == kaijiang[v]) {
					red++;
					break;
				}
			}
		}
		//对比蓝球是否中奖
		if (boll[6] == kaijiang[6]) {
			blue++;
		}
		isOK(red, blue);
		console.log(boll)
	}
    //输出中奖次数
	console.log(`一等奖${yi},二等奖${er},三等奖${san},四等奖${si},五等奖${wu},六等奖${liu}`);
}
//全局中奖注数
let yi = er = san = si = wu = liu = 0;

//中奖判定
function isOK(red, blue) {
	if (red == 6 && blue === 1) {
		yi++;//一等奖
	} else if (red === 6 && blue === 0) {
		er++;//二等奖
	} else if (red === 5 && blue === 1) {
		san++;//三等奖
	} else if ((red === 5 && blue === 1) || (red === 4 && blue === 1)) {
		si++;//四等奖
	} else if ((red === 4 && blue === 0) || (red === 3 && blue === 1)) {
		wu++;//五等奖
	} else if (blue === 1) {
		liu++;//六等奖
	}
}

展示效果