使用JavaScript的数字螺旋矩阵。。。结果的问题_Javascript_Html

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

javascript html

使用JavaScript的数字螺旋矩阵。。。结果的问题,javascript,html,Javascript,Html,我试图创建一个逆循环矩阵（从大的数字到中间的小数字）的数字。。。但我面临一个问题：我无法在屏幕上显示它。用户输入数字N并按下按钮，矩阵必须形成但它不起作用。。。。请帮帮我。。。建造师输入号码创造函数create（）{ a=parseFloat（document.getElementById（“a”）.value）； document.body.style.background=“绿色”； var螺旋=[a][a]； var值=1； var-minCol=0； var maxCol

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

但它不起作用。。。。请帮帮我。。。


建造师
输入号码



创造
函数create（）{
a=parseFloat（document.getElementById（“a”）.value）；
document.body.style.background=“绿色”；
var螺旋=[a][a]；
var值=1；
var-minCol=0；
var maxCol=a-1；
var minRow=0；
var maxRow=a-1；
而（value您的代码中有几个问题：

var spiral=[a][a]
并没有按照您的想法进行操作。它没有定义宽度和高度为a
的二维数组。相反，它创建了一个具有一个值（a）的一维数组然后它访问该数组的索引，却发现它没有该索引a
。因此spiral
被赋值未定义

您开始填充第0行，该行已经是错误的位置：数字1不会在最终结果中结束，但您将其保留在那里
最后在每次迭代中覆盖innerHTML
。这也不是您想要的…最好先准备矩阵，然后将其转换为字符串，最后将其分配给DOM（使用textContent
比使用innerHTML
更好）
当您将\t
字符分配给div
的innerHTML
而无需进一步的CSS样式时，该字符将不会呈现出与空格不同的效果。当您使用保留空白（或使用CSS）的pre
元素时，将获得更好的效果，因此您可以用所需的空格数填充每个输出编号以对齐它（使用padStart
）
该按钮的文本也有误导性。您处理输入时并没有将其视为2的幂：您仍然使用a*a


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

函数createSpiral（n）{
如果（n==1）返回[[1]]；
如果（n==2）返回[[3,4]，
[2, 1]];
设缓和曲线=创建缓和曲线（n-2）；
//向这些行添加前缀和后缀号：
让起动=n*（n-1）；
设end=（n-2）*（n-2）+1；
对于（让螺旋线的行）{
行。取消移位（开始--）；
row.push（end++）；
}
//在顶部和底部添加额外的行
开始=n*（n-1）+1；
spiral.unshift（spiral[0].map（（）=>start++）；
结束=n*（n-2）+2；
spiral.push（spiral[0].map（（）=>end--））；
回程螺旋；
}
//I/O处理
让输入=document.querySelector（“#宽度”）；
让输出=document.querySelector（“螺旋”）；
函数刷新（）{
设n=+input.value；
//验证输入
如果（！（n>=1&&n<100））返回；
//执行算法
设spiral=createSpiral（n）；
//将返回的螺旋线格式化为格式良好的字符串
让数字=（n*n+“”）。长度；
output.textContent=spiral.map（row=>row.map（i=>（“”+i）.padStart（数字））.join（“”）.join（“\n”）；
}
input.addEventListener（“输入”，刷新）；
刷新（）；
对于螺旋，您可以通过检查剩余的填充大小，在两侧进行迭代

功能螺旋线（长度）{
var上限=0，
下=长度-1，
左=0，
右=长度-1，
i=上，
j=左，
result=Array.from（{length}，=>[]），
值=长度*长度；
while（true）{
如果（左+++>右）中断；
对于（；i上限；i--）结果[i][j]=值--；
如果（上+++>下）中断；
对于（；j>左；j--）结果[i][j]=值--；
}
结果[i][j]=值--；
返回结果；
}
var target=document.getElementById（'out'），
i=10；
而（--i）target.innerHTML+=spiral（i）.map（a=>a.map（v=>v.toString（）.padStart（2））.join（“”））.join（“\n'）+”\n\n”；
您能否将代码放入Glitch或codesandbox中，并说明它现在做了什么…var spiral=[a][a]
没有按照您的想法进行操作。还有其他错误。您开始填充第0行，这已经是错误的：这不是数字1的结尾。在每次迭代结束时，您都会覆盖innerHTML
。这也不是您想要的。按钮的文本也会误导您。您处理输入时不会将其视为一个错误2的幂次：你仍然用a*a将其提升到该幂次。具有预期结果的图片与上面的箭头不同：它缺少顶行（矩阵不是正方形）。你能澄清一下吗？你在吗？你写“请帮助我”，但你不回复评论…我走了。谢谢你的详细回答，非常有效。现在我必须分析和理解它是如何工作的。我是JS的初学者，我正在学习…非常感谢你的帮助。我非常感谢。
<!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>