代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>doubleBox</title>
<style>
html,
body {
padding: 0;
margin: 0;
}
body {
background-color: #f2f2f2;
}
div {
align-items: baseline;
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 15px;
}
.itemBox {
background-color: #fff;
/* margin: 15px; */
padding: 15px;
}
#box {
margin: 15px;
}
span {
margin-right: 6px;
margin-bottom: 6px;
color: #000;
background-color: #f2f2f2;
border-radius: 50%;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
/* font-size: 16px; */
}
.title {
width: 70px;
}
.blue {
margin-left: 16px;
/* background-color: #1890ff !important; */
}
</style>
</head>
<body>
<div id="box"></div>
<!-- <div>
<div id="A"></div>
<div id="B"></div>
<div id="C"></div>
<div id="D"></div>
<div id="E"></div>
<div id="F"></div>
<div id="G"></div>
</div> -->
</body>
</html>
<script>
// 生成随机数
function lucky(n, m) {
return (
Math.floor(Math.random() * (Math.ceil(n) - Math.floor(m) + 1)) +
Math.floor(m)
);
}
// 生成随机数组
function randomData() {
const a = lucky(1, 33);
const b = lucky(1, 33);
const c = lucky(1, 33);
const d = lucky(1, 33);
const e = lucky(1, 33);
const f = lucky(1, 33);
if (new Set([a, b, c, d, e, f]).size !== 6) {
console.log("存在重复，重新生成");
return randomData(); // 切记这里不要写成this.randomData();否则会报错，因为this指向上下文的时候没有获取到期待值从而报错
} else {
return { a, b, c, d, e, f };
}
}
var arr = [];
// 生成字典
function getZiDian() {
for (let i = 0; i < 99; i++) {
let { a, b, c, d, e, f } = this.randomData();
let g = lucky(1, 12);
console.log({ a, b, c, d, e, f });
console.log(i);
let Box = document.getElementById("box");
let Item = document.createElement("div");
Item.className = "itemBox";
let T = document.createElement("i");
let A = document.createElement("span");
let B = document.createElement("span");
let C = document.createElement("span");
let D = document.createElement("span");
let E = document.createElement("span");
let F = document.createElement("span");
let G = document.createElement("span");
T.textContent = `第${i + 1}次`;
T.className = "title";
A.textContent = a;
A.className = "item";
A.style = "margin-left: 12px";
B.textContent = b;
B.className = "item";
C.textContent = c;
C.className = "item";
D.textContent = d;
D.className = "item";
E.textContent = e;
E.className = "item";
F.textContent = f;
F.className = "item";
G.textContent = g;
G.className = "blue";
Item.appendChild(T);
Item.appendChild(A);
Item.appendChild(B);
Item.appendChild(C);
Item.appendChild(D);
Item.appendChild(E);
Item.appendChild(F);
Item.appendChild(G);
Box.appendChild(Item);
arr.push({
左: `${a},${b},${c},${d},${e}, ${f}`,
右: g,
});
}
}
getZiDian();
console.log("结果：", arr);
</script>
效果图：
标签：03,appendChild,29,className,Item,let,数组,createElement,document From： https://www.cnblogs.com/iuniko/p/18103787