Question

我正在尝试使用javascript for循环创建X或加号（+）模式，但未能这样做。这是我的代码

function drawCross(){
    var inputVal = document.getElementById("input").value;
    if (inputVal % 2 === 0) { // checks if the user's entered value is even
        document.getElementById("output").innerHTML = "";

        for (var row = 0; row < inputVal; row++) {
            for (var col = 0; col < inputVal; col++) {

                if (row == col + 3 ||  row == parseInt(inputVal / 1)) 
                    document.getElementById("output").innerHTML += "O";
                else
                    document.getElementById("output").innerHTML += "..";
            }
            document.getElementById("output").innerHTML += "<br/>";
        }
    }
}

这是我想要实现的最终结果

Answer 1

一些问题：

确保输出元素使用等宽字体。例如，您可以使用pre元素。然后你不必加倍积分来获得仍然不完美的东西。
输入数字应该是奇数，不是偶数。否则你没有中心栏/行。
第二个对角线的公式与你不一样（除以1没有多大意义）。使用row == +inputVal - col - 1

除此之外，还尝试与DOM进行较少的交互：只有在拥有最终的HTML字符串时才更新它。

以下是代码：

function drawCross(){
    var inputVal = +document.getElementById("input").value;
    var html = "";
    if (inputVal % 2 === 1) { // checks if the user's entered value is odd
        for (var row = 0; row < inputVal; row++) {
            for (var col = 0; col < inputVal; col++) {
                if (row == col ||  row == inputVal - col - 1) 
                    html += "O";
                else
                    html += ".";
            }
            html += "<br/>";
        }
        document.getElementById("output").innerHTML = html;
    }
}

Enter odd number: <input id="input">
<button onclick="drawCross()">Go</button>
<pre id="output"></pre>

Javascript嵌套for循环模式

1 个答案: