使用 JavaScript 的数字螺旋矩阵...结果有问题

Question

我正在尝试创建数字的逆圆形矩阵（从大数到中间的小数）......但我面临一个问题：我无法在屏幕上显示它。 用户输入数字 N 并按下按钮，必须形成矩阵......

但它不起作用......请帮助我......

<!DOCTYPE html>
<html>
<head>
<body style="background-color:#bf8b99;" align="center">
<h1>CONSTRUCTOR</h1>
<h2>INPUT NUMBER</h2>

<form>

  <input type="text" name="a" size="15" id="a">

</form><br><br>

<button type="button" onclick="create()">CREATE</button>
<div id="test"></div>

<script>

function create(){
    a=parseFloat(document.getElementById("a").value);
    document.body.style.background = "green";

    var spiral = [a][a];
        var value = 1; 
        var minCol = 0;
        var maxCol = a-1;
        var minRow = 0;
        var maxRow = a-1;

        while (value <= a*a)
        {
            for (int i = minCol; i <= maxCol; i++)
            { spiral[minRow][i] = value;               
                value++;
            }

            for (int i = minRow+1; i <= maxRow; i++) 
            { spiral [i][maxCol] = value;            
                value++; 
            } 

            for (int i = maxCol-1; i >= minCol; i--)
            { spiral[maxRow][i] = value;                      
                value++;
            }

            for (int i = maxRow-1; i >= minRow+1; i--) 
            { spiral[i][minCol] = value;
                value++;
            }      
            minCol++;
            minRow++;          
            maxCol--;           
            maxRow--;
        }

        for (int i = 0; i < spiral.length; i++)
        { 
            for (int j = 0; j < spiral.length; j++)
            {
              document.getElementById('test').innerHTML = spiral[i][j] + "\t";
            }
        }
}
</script>
</body>
</html>

Answer 1

您的代码中有几个问题：

var spiral = [a][a]没有按照您的想法行事。 它没有定义宽度和高度为a的二维数组。 相反，它创建一个一维数组，其中包含一个值 ( a )。 然后它访问该数组的索引只是发现它没有该索引a 。 所以spiral被分配了undefined 。
您开始填充第 0 行，这已经是错误的位置：这不是最终结果中第 1 行的位置，但您将其留在那里。
最后，您会在每次迭代中覆盖innerHTML 。 这也不是你想要的......最好准备矩阵，然后首先将其转换为字符串，然后最后将其分配给 DOM（使用textContent比使用innerHTML更好）。
当您将\\t字符分配给div的innerHTML而没有进一步的 CSS 样式时，它不会呈现与空格有任何不同的效果。 当您使用pre元素时，您将获得更好的结果，该元素保留空白（或使用 CSS 进行），因此您可以使用所需数量的空格填充每个输出数字以使其对齐（使用padStart ）。
按钮的文字也具有误导性。 你没有把输入当作 2 的幂来处理：你仍然用a*a把它提高到那个幂......

这是一个使用递归的解决方案：如果给定的宽度是 1 或 2，则只返回硬编码的解决方案（基本情况）。 如果更大，则解决宽度少两个单位的问题，然后在所有边上用一个额外的数字包装该结果。 找到完成这最后一步的数学不变量并不难。

这是一个片段：

 function createSpiral(n) { if (n === 1) return [[1]]; if (n === 2) return [[3, 4], [2, 1]]; let spiral = createSpiral(n-2); // add a prefix and a postfix number to those rows: let start = n*(n-1); let end = (n-2)*(n-2) + 1; for (let row of spiral) { row.unshift(start--); row.push(end++); } // add extra row at top and bottom start = n*(n-1)+1; spiral.unshift(spiral[0].map(() => start++)); end = n*(n-2)+2; spiral.push(spiral[0].map(() => end--)); return spiral; } // I/O handling let input = document.querySelector("#width"); let output = document.querySelector("#spiral"); function refresh() { let n = +input.value; // Validate input if (!(n >= 1 && n < 100)) return; // Perform the algorithm let spiral = createSpiral(n); // Format the returned spiral to a nicely formatted string let digits = (n*n+"").length; output.textContent = spiral.map(row => row.map(i => (""+i).padStart(digits)).join(" ")).join("\\n"); } input.addEventListener("input", refresh); refresh();

 <input type="number" id="width" max="99" min="1" value="5"> <pre id="spiral"></pre>

Answer 2

对于螺旋，您可以进行一些迭代，它们在两侧运行并检查左侧的填充大小。

 function spiral(length) { var upper = 0, lower = length - 1, left = 0, right = length - 1, i = upper, j = left, result = Array.from({ length }, _ => []), value = length * length; while (true) { if (left++ > right) break; for (; i < lower; i++) result[i][j] = value--; if (lower-- < upper) break; for (; j < right; j++) result[i][j] = value--; if (right-- < left) break; for (; i > upper; i--) result[i][j] = value--; if (upper++ > lower) break; for (; j > left; j--) result[i][j] = value--; } result[i][j] = value--; return result; } var target = document.getElementById('out'), i = 10; while (--i) target.innerHTML += spiral(i).map(a => a.map(v => v.toString().padStart(2)).join(' ')).join('\\n') + '\\n\\n';

 <pre id="out"></pre>

使用 JavaScript 的数字螺旋矩阵...结果有问题

问题描述

2 个解决方案

解决方案1
1 2020-02-22 09:29:13

解决方案2
1 2020-02-22 10:26:42

使用 JavaScript 的数字螺旋矩阵...结果有问题

问题描述

2 个解决方案

解决方案1 1 2020-02-22 09:29:13

解决方案2 1 2020-02-22 10:26:42

解决方案1
1 2020-02-22 09:29:13

解决方案2
1 2020-02-22 10:26:42