js-双色球
js-双色球
一、代码
1.html
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 50px;
color: #fff;
margin: 5px 5px;
border: 3px solid #fff;
}
li:hover {
cursor: pointer;
}
#redbox,
#bluebox,
#selectbox {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.red {
background: red;
}
.blue {
background: blue;
}
.selected {
border: 3px solid black;
}
</style>
</head>
<body>
<div id="redbox">
</div>
<div id="bluebox">
</div>
<div id="selectbox"></div>
<div>
<input type="text" id="num">
<button id="btn">开始开奖</button>
</div>
<script src="./doublecolor.js"></script>
<script>
let dbc = new DoubleColorBoll();
let yi = er = san = si = wu = liu = 0;
//开始
document.getElementById("btn").onclick = function () {
//获取已经选中的双色球
let bolls = document.querySelectorAll("#selectbox>li"), bollarr = [];
for (let b of bolls) {
bollarr.push(b.innerText);
}
//获取文本框的注数
let num = parseInt(document.getElementById("num").value), boll;
//根据注数产生对应的双色球
for (let i = 0; i < num; i++) {
boll = dbc.getDoubleColor();
isOk(bollarr, boll);
}
//产生的随机数跟获取的双色球对比 统计出中奖的数量
console.log(`一等奖${yi}，二等奖${er}，三等奖${san}，四等奖${si}，五等奖${wu}，六等奖${liu}`);
}
//是否中奖的判断
function isOk(bollarr, boll) {
let rednum = 0, blue = false;
for (let i = 0; i < boll.length - 1; i++) {
for (let j = 0; j < boll.length - 1; j++) {
if (bollarr[i] == boll[j]) {
rednum++;
break;
}
}
}
blue = bollarr[6] == boll[6];
if (rednum == 6 && blue) {
yi++;
} else if (rednum == 6 && !blue) {
er++;
} else if (rednum == 5 && blue) {
san++;
} else if ((rednum == 5 && !blue) || (rednum == 4 && blue)) {
si++;
} else if ((rednum == 4 && !blue) || (rednum == 3 && blue)) {
wu++;
} else if (blue) {
liu++;
}
}
</script>
</body>
</html>
2.js
代码如下（示例）：
//Math.random()产生0-1之间的随机小数
//Math.ceil()向上取整
//Math.floor()向下取整
//双色球游戏类
class DoubleColorBoll {
//构造函数 allread表示当前中奖的号码 如果没有参入该参数 那么中奖号码默认是"1-2-3-4-5-6-7"
//num 产生多少注双色球
constructor(allread = "1-2-3-4-5-6-7", num) {
this.init()
}
//初始化页面
init() {
let node;
for (let i = 1; i < 34; i++) {
node = this.createBoll("red", i)
node.addEventListener("click", this.redclick(this))
//将产生的节点存入页面对应的位置
document.getElementById("redbox").append(node);
}
for (let i = 1; i < 17; i++) {
node = this.createBoll("blue", i)
node.addEventListener("click", this.blueclick(this))
document.getElementById("bluebox").append(node);
}
}
//红球的点击事件
redclick(_this) {
function redc() {
//如果当前被点击的元素没有被选中的样式
if (this.className.indexOf("selected") == -1) {
//获取所有被选中的红球个数
let len = document.querySelectorAll("#redbox>.selected").length;
//如果红球个数大于等于6 则阻断程序
if (len >= 6) { return; }
//给红球添加被选中的样式
this.className = "red selected";
_this.saveBoll(this, 1);
} else {
//取消当前被点击的红球的被选中样式
this.className = "red";
_this.saveBoll(this, 2);
}
}
return redc;
}
//蓝球点击事件
blueclick(_this) {
//首先说去蓝色容器中被选中的元素
function bluec() {
let node = document.querySelector("#bluebox>.selected")
if (node) node.className = "blue";
this.className = "blue selected"
//将选中球存入容器
_this.saveBoll(this, 3);
}
return bluec;
}
//将选定的双色球存入选定容器中
//type ==1 添加 2删除 3蓝球替换
saveBoll(obj, type) {
//获取被选中的红球 然后进行排序 放入被选中的盒子中
if (type === 1) {
let node = document.getElementById("selectbox");
node.prepend(obj.cloneNode(true))
//排序
let nodes = document.querySelectorAll("#selectbox>.red"), temp, newArr = [];
for (let i of nodes) {
newArr.push(parseInt(i.innerText))
}
for (let i = 0; i < newArr.length - 1; i++) {
for (let j = 0; j < newArr.length - i - 1; j++) {
if (newArr[j] > newArr[j + 1]) {
temp = newArr[j];
newArr[j] = newArr[j + 1];
newArr[j + 1] = temp;
}
}
}
for (let i in newArr) {
nodes[i].innerText = newArr[i];
}
} else if (type === 2) {
let nodes = document.querySelectorAll("#selectbox>.red");
for (let n of nodes) {
if (n.innerText == obj.innerText) {
//删除
n.remove();
break;
}
}
} else if (type === 3) {
let node = document.querySelectorAll("#selectbox>.blue");
//先判断是否有蓝球
if (node.length >= 1) {
node[0].innerText = obj.innerText;
} else {
//如果没有就添加
document.getElementById("selectbox").append(obj.cloneNode(true))
}
}
//获取被选中的蓝球 直接放入被选中盒子的末尾
}
//产生双色球节点
createBoll(color, num) {
//创建一个li元素
let node = document.createElement("li");
//设置li标签的样式
node.className = color;
//设置li标签的文本
node.innerText = num;
return node;
}
//产生制1到定范围内的随机数 rand表示一个范围值
getRaodom(rand) {
return Math.ceil(Math.random() * rand)
}
//产生一个7个数字的一组号码 其中前6位不能重复 1-33 第七位可以跟前6位重复 1-16
getDoubleColor() {
let boll = []
for (let i = 0; i < 6; i++) {
while (true) {
let num = this.getRaodom(33)
if (boll.indexOf(num) == -1) {//产生随机数 当产生的随机数不是数组里面出现过的数字时将该随机数存入数组 并且退出循环
boll.push(num);
break;
}
}
}
boll.sort((v1, v2) => {
return v1 - v2;
})
boll[6] = this.getRaodom(16)
return boll;
}
}
总结
对js的循环 数组 排序进行了运用和总结