效果图
核心代码
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
W3SCHOOL
break 语句“跳出”循环。
continue 语句“跳过”循环中的一个迭代。
fill
W3SCHOOL
fill()方法用静态值填充数组中的指定元素。
您可以指定开始和结束填充的位置。如果未指定,则将填充所有元素。
注释:fill()会覆盖原始数组。
MDN
fill()方法用一个固定值填充一个数组中从起始索引(默认为0)到终止索引(默认为array.length)内的全部元素。它返回修改后的数组。