<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双色球摇号</title>
<style>
.container {
margin: 0 auto;
}
.qiu {
display: inline-block;
width: 30px;
text-align: center;
line-height: 30px;
height: 30px;
border-radius: 50%;
margin: 5px;
}
.qiu:not(:last-child) {
background: red;
color: #ffffff;
}
.qiu:last-child {
background: blue;
color: #ffffff;
}
</style>
</head>
<body>
<div id="container">
<!-- <div class="qius">-->
<!-- <div class="qiu"></div>-->
<!-- <div class="qiu"></div>-->
<!-- <div class="qiu"></div>-->
<!-- <div class="qiu"></div>-->
<!-- <div class="qiu"></div>-->
<!-- </div>-->
</div>
<script>
const container = document.getElementById('container');
function pro() {
// 模式33个红球和蓝球，一个一个的抽取
let qs = [];
const reds = new Array(33).fill(1).map((_, index) => index+1);
// 生产6个红球
while (qs.length < 6) {
const q = Math.ceil(Math.random() * reds.length) - 1;
qs.push(reds[q]);
if (!reds[q]) {
console.log(q, reds.length);
}
// 删除q
reds.splice(q, 1);
}
qs.sort((a, b) => a - b);
// 生成1个蓝球
const blues = new Array(16).fill(1).map((_, index) => index+1);
const q = Math.ceil(Math.random() * blues.length);
qs.push(q);
return qs;
}
// 生成五注
for (var i = 0; i < 5; i++) {
const qius = pro();
const qiusEle = document.createElement('div');
qiusEle.setAttribute('class', 'qius');
for (const qiu of qius) {
const qiuEle = document.createElement('div');
qiuEle.setAttribute('class', 'qiu');
qiuEle.innerText = qiu;
qiusEle.append(qiuEle);
}
container.append(qiusEle);
}
// console.log(pro());
</script>
</body>
</html>
