JavaScript实现旋涡型二维数组、使用背景加间距的方式实现表格功能、实现表格不使用边框方式、fill、break、querySelector

---

效果图

---

核心代码

function vortex(n, m) {
    const nums = new Array(n).fill(0).map(() => new Array(m).fill(0));
    // 行号
    let i = 0;
    // 列号
    let j = 0;
    let count = 1;
    // 每次i增加的数字
    let stepI = 0;
    // 每次j增加的数字
    let stepJ = 1;
    let hasBlock = () => !nums[i] || nums[i][j] !== 0;

    while (true) {
        nums[i][j] = count++;

        // 改变i和j的
        i += stepI;
        j += stepJ;

        if (hasBlock()) {
            // 转弯
            i -= stepI;
            j -= stepJ;

            if (stepI === 0) {
                stepI = stepJ;
                stepJ = 0;
            } else {
                stepJ = -stepI;
                stepI = 0;
            }

            i += stepI;
            j += stepJ;

            if (hasBlock()) break;
        }
    }

    return nums;
}

---

页面渲染

html

<div id="idBox" class="h_100_ d_f fd_c jc_sa ai_c"></div>

---

JavaScript

function init(n, m) {
    let list = vortex(n, m),
        domStr = '<div class="bc_ffa500 b_2s_ffa500">';

    for (let i = 0; i < list.length; i++) {
        const itemList = list[i];

        domStr += '<div class="d_f">';

        for (let j = 0; j < itemList.length; j++) {
            const item = itemList[j];

            domStr += `<div class="w_68 h_68 lh_68 ta_c fs_36 fw_700 bc_ccc ${i !== 0 ? 'mt_2' : 'mt_0'} ${j !== 0 ? 'ml_2' : 'ml_0'}">${item}</div>`;
        }

        domStr += '</div>';
    }

    domStr += '</div>';

    return domStr;
}

let idBox = document.querySelector('#idBox');

idBox.innerHTML = init(3, 6) + init(5, 7);

---

解析

待定…

---

querySelector

W3SCHOOL

querySelector()方法返回与CSS选择器匹配的第一个元素。
如需返回所有匹配项(不仅是第一个匹配项)，请改用querySelectorAll()。
如果选择器无效，则querySelector()和querySelectorAll()都会抛出SYNTAX_ERR异常。

---

MDN

文档对象模型Document引用的querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个Element对象。如果找不到匹配项，则返回null。
备注：匹配是使用深度优先先序遍历，从文档标记中的第一个元素开始，并按子节点的顺序依次遍历。

---

break

MDN

break语句中止当前循环，switch语句或label语句，并把程序控制流转到紧接着被中止语句后面的语句。

---

W3SCHOOL

break 语句“跳出”循环。
continue 语句“跳过”循环中的一个迭代。

---

fill

W3SCHOOL

fill()方法用静态值填充数组中的指定元素。
您可以指定开始和结束填充的位置。如果未指定，则将填充所有元素。
注释：fill()会覆盖原始数组。

---

MDN

fill()方法用一个固定值填充一个数组中从起始索引(默认为0)到终止索引(默认为array.length)内的全部元素。它返回修改后的数组。