不废话，直接上代码：
function changeXY(arr, size) {
let newArr = []
let iNow = 0
;(function() {
if (size == iNow) {
return
}
for (let i = 0; i < arr.length; i++) {
if (i % size === iNow) {// 找到拐点
newArr.push(arr[i])
}
}
iNow++
arguments.callee() // 自调函数
})()
return newArr
}
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#ul1 {
margin: 20px auto;
overflow: hidden;
border: 1px #000 solid;
border-right: none;
border-bottom: none;
}
#ul1 li {
float: left;
border: 1px #000 solid;
border-left: none;
border-top: none;
text-align: center;
line-height: 50px;
}
</style>
<body>
<ul id="ul1"></ul>
</body>
<script >
let oUl = document.getElementById('ul1')
let aLi = document.getElementsByTagName('li')
let sizeGrid = 50
let size = 7
let len = size * size
let arr = []
oUl.style.width = size * (sizeGrid + 1) + 'px'
for (let i = 0; i < len; i++) {
let oLi = document.createElement('li')
oLi.style.width = sizeGrid + 'px'
oLi.style.height = sizeGrid + 'px'
oLi.innerHTML = i
arr.push(i)
oUl.appendChild(oLi)
}
function changeXY(arr, size) {
let newArr = []
let iNow = 0
;(function() {
if (size == iNow) {
return
}
for (let i = 0; i < arr.length; i++) {
if (i % size === iNow) {
newArr.push(arr[i])
}
}
iNow++
arguments.callee()
})()
return newArr
}
let arr1 = changeXY(arr, size)
console.log(arr1)
for (let i = 0; i < aLi.length; i++) {
aLi[i].innerHTML = arr1[i]
}
</script>
</html>
