使用 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