实现一个包含 m x n 个元素的矩阵（m 行, n 列），请按照顺时针螺旋顺序，返回矩阵中的所有元素。
第一步实现一个8*8的网格
<body>
<ul id="ulList"></ul>
</body>
<script>
let oUI = document.getElementById('ulList');
let aLi = oUI.getElementsByTagName('li');
let size = 8; // 网格个数
let len = size * size;
let sizeGird = 50; // 网格大小
oUI.style.width = size * (sizeGird + 1) + 'px';
for (let i = 0; i < len; i++) {
let oLi = document.createElement('li');
oLi.style.width = `${sizeGird}px`;
oLi.style.height = `${sizeGird}px`;
oUI.appendChild(oLi);
}
</script>
判断每一环的拐点数和缩短环数
let row = 0; // 行
let col = 0; // 列
let min = 0; // 最小环数
let max = size - 1; // 最大环数
let arr = []; // 暂存数据
// 找每一环的拐点数
for (let i = 0; i < len; i++) {
arr.push(aLi[row * size + col]);
// 如果行数等于最小数并且列数小于最大数 让列数往右加（判断的是数字1）
if (row == min && col < max) {
col = col + 1;
// 如果列数等于最大数并且行数小于最大数 让行数往下加（判断的是数字4）
} else if (col == max && row < max) {
row = row + 1;
// 如果行数等于最大数并且行数大于最小数 让行数往左减（判断的是数字7）
} else if (row == max && col > min) {
col = col - 1;
// 如果列数等于最小数并且行数大于最小数 让行数往上减（判断的是数字10）
} else if (col == min && row > min) {
row = row - 1;
}
// 缩短环数
// 如果行数-1等于最小数并且列数等于最小数 让最小数加1，最大数减1
if (row - 1 == min && col == min) {
min = min + 1;
max = max - 1;
}
}
实现每隔五个网格添加个图片
for (let i = 0; i < aLi.length; i++) {
if (i % 5 == 0) {
let bgImage = `url(./img/img${Math.floor(Math.random() * 7 + 1)}.jpeg)`
arr[i].style.backgroundImage = bgImage;
bgArr.push([i, bgImage])
}
}
实现动态添加图片
run()
// 设置定时器
setInterval(run, 1000)
function run() {
// 清空上一个图片
for (let i = 0; i < aLi.length; i++) {
arr[i].style.backgroundImage = '';
arr[i].className = '';
}
for (let i = 0; i < bgArr.length; i++) {
bgArr[i][0] = bgArr[i][0] + 1;
// 如果数据存在
if (arr[bgArr[i][0]]) {
arr[bgArr[i][0]].style.backgroundImage = bgArr[i][1];
arr[bgArr[i][0]].className = 'active'
arr[bgArr[i][0]].style.animateDeleay = `-${Math.random()*3}s`
} else {
bgArr.pop();
let bgImage = `url(./img/img${Math.floor(Math.random() * 7 + 1)}.jpeg)`;
// 往数组第一个追加一个随机图片
bgArr.unshift([0,bgImage])
}
}
}
git的项目地址
项目访问地址
