請求幫助：使用嵌套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）

回答

相關問題