请求帮助：使用嵌套if循环设置网格（JavaScript）

我在使用嵌套if语句设置网格时遇到了一些困难。这是一个相对简单的任务，但我似乎被卡住了！请求帮助：使用嵌套if循环设置网格（JavaScript）

这是一个学校作业。说明如下：

“如果用户在文本输入框中输入8并单击该按钮，则应绘制八个行和一列小方块。为此，需要两个嵌套在一起的for循环此：

for (row=1; ...) { 
 
    for (col=1; ...) { 
 
    ... 
 
    } 
 
}

在（最内）循环体，画上与x和从循环计数器计算的y值的纸稍微正方形所以平方在结束了网格图案。

您的页面看起来像这样（取决于用户输入的数字，显然）。不要担心色彩盒尚未：那就是下一个部分”

结果应该是这个样子：

image

您可以忽略一些方格是有色的事实。到目前为止，我想出了这一点：

generate = function() { 
 
n = 0 
 
x = 0 
 
y = 0 
 
n = $('#squares').val() 
 
for (row = 1; row <= n; row += 1) { 
 
\t for (col = 1; col <= n; col += 1) { 
 
\t \t r = paper.rect(x, y, 10,10) 
 
\t \t x = x + 20 
 
\t } 
 
\t y = y + 20 
 
} 
 
} 
 

 
setup = function() { 
 
\t paper = Raphael('container', 400, 400) 
 
\t $('#number').click(generate) 
 
} 
 
jQuery(document).ready(setup)

谢谢ÿ ou提前！

来源

2017-04-01 Gary Sidhu

看起来你有基本的想法，但也有一些缺失的部分 - 你应该尝试建立的jsfiddle或类似的环境，展现你有什么工作。例如，什么是'paper.rect（）'？例如，一个问题是你在内部循环中每次将'x'增加20，但是你必须将它重置为每个新行的0位置。 –

可以使用启动变量0和条件检查row < n设置for循环中行和列的起始值。

下面是一个使用javascript和canvas而没有外部库的例子。

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <label>Grid size:</label> 
    <input type="number" name="go" type="text" name="" id=""> 
    <button class="button">go</button> 
    <canvas id="canvas" width="400" height="400"></canvas> 
</body> 
</html>

JS：

var c = document.getElementById("canvas"); 
var ctx = c.getContext("2d"); 

document.getElementsByClassName('button')[0].onclick = function() { 
    var value = document.querySelector('input[name="go"]').value; 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    var space = 400/(value); 

    for (row = 0; row < value; row += 1) { 
    for (col = 0; col < value; col += 1) { 
     ctx.fillRect(row * space, col * space, space - 10, space - 10) 
    } 
    } 
}

来源

2017-04-06 10:23:51

请求帮助：使用嵌套if循环设置网格（JavaScript）

回答

相关问题