Vanilla JavaScript+Tailwind CSS构建75球Bingo卡片布局异常问题

你的问题出在两个核心点：Grid容器的类配置错误，以及二维数组的遍历顺序和Bingo卡片的行列结构不匹配，以下是具体解决方法：

1. 修正Grid容器的Tailwind类 #

你之前只设置了grid-rows-5（定义行数），但没明确列数，导致Grid无法正确排列元素。需要同时设置grid-cols-5和grid-rows-5来定义5x5的网格结构，把inline-grid换成grid更适合卡片的块级展示：

card.classList.add('grid', 'grid-cols-5', 'grid-rows-5', 'gap-2', 'bg-zinc-900', 'border-2', 'border-zinc-900');

2. 修正数组遍历顺序 #

你的cardNumbers是列优先的二维数组：cardNumbers[0]是B列的5个数字，cardNumbers[1]是I列的5个数字……但你之前的循环是先遍历列再遍历行，导致元素顺序是B1,B2,B3,B4,B5,I1,I2...，Grid会把前5个元素放在第一行，完全不符合Bingo卡片“每行包含各列一个数字”的结构。

正确的遍历顺序应该是先遍历行，再遍历列：每次取每一列的第j个元素，组成一行的5个数字（Bj, Ij, Nj, Gj, Oj）。同时可以加入Bingo标准的中间FREE格逻辑：

// 先遍历行，再遍历列
for (let j = 0; j < 5; j++) {
    for (let i = 0; i < 5; i++) {
        const cardCell = document.createElement("div");
        let cardCellNumber = cardNumbers[i][j];
        // 中间格设置为FREE
        if (j === 2 && i === 2) {
            cardCell.textContent = "FREE";
            cardCell.classList.add('bg-yellow-200');
        } else {
            cardCell.textContent = cardCellNumber;
        }
        cardCell.classList.add('w-28', 'h-28', 'text-5xl', 'flex', 'justify-center', 'items-center', 'bg-pink-100');
        card.appendChild(cardCell);
    }
}

完整修改后的代码 #

HTML（保持不变） #

<body>
    <button onclick="bingoCard()">Click to create card</button>
    <script src="./script.js"></script>
</body>

JavaScript（修改后） #

const bingoCard = () => {
    // 移除已存在的卡片，避免重复生成
    const existingCard = document.getElementById("card");
    if (existingCard) existingCard.remove();

    const card = document.createElement("div");
    card.setAttribute("id", "card");
    // 修正Grid类：明确5列5行网格
    card.classList.add('grid', 'grid-cols-5', 'grid-rows-5', 'gap-2', 'bg-zinc-900', 'border-2', 'border-zinc-900');
    document.body.appendChild(card);

    let cardNumbers = createCardArrays();
    // 按行优先遍历，匹配Bingo卡片结构
    for (let j = 0; j < 5; j++) {
        for (let i = 0; i < 5; i++) {
            const cardCell = document.createElement("div");
            let cardCellNumber = cardNumbers[i][j];
            // 中间格设置为FREE
            if (j === 2 && i === 2) {
                cardCell.textContent = "FREE";
                cardCell.classList.add('bg-yellow-200');
            } else {
                cardCell.textContent = cardCellNumber;
            }
            cardCell.classList.add('w-28', 'h-28', 'text-5xl', 'flex', 'justify-center', 'items-center', 'bg-pink-100');
            card.appendChild(cardCell);
        }
    }
}
function createCardArrays() {
    const cardNumbers = new Array(5);
    let max, min;
    for (let i = 0; i < 5; i++) {
        max = 15 * (i + 1);
        min = max - 14;
        cardNumbers[i] = generateRandomNumbers(5, min, max);
    }
    return cardNumbers;
}

function generateRandomNumbers(count, min, max) {
    let uniqueNumbers = new Set();
    while (uniqueNumbers.size < count) {
        uniqueNumbers.add(Math.floor(Math.random() * (max - min + 1)) + min);
    }
    return [...uniqueNumbers];
}

额外优化说明 #

• 加入了移除已有卡片的逻辑，避免多次点击按钮生成多个卡片
• 增加了Bingo卡片标准的中间FREE黄色格子

内容的提问来源于stack exchange，提问作者apex2022