gpt4 book ai didi

javascript - 请求帮助 : setting up a grid using nested if loops (JavaScript)

转载 作者:行者123 更新时间:2023-12-03 04:39:16 25 4
gpt4 key购买 nike

我在使用嵌套 if 语句设置网格时遇到一些困难。这是一个相对简单的任务,但我似乎被困住了!

这是学校作业。说明如下:

“如果用户在文本输入中输入 8 并单击按钮,您应该绘制八行八列的小方 block 。为此,您需要两个相互嵌套的 for 循环,如下所示:

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

在(最里面的)循环体中,在纸上画一个小正方形,并使用循环计数器计算出的 x 和 y 值,使正方形最终形成网格图案。

您的页面将如下所示(显然取决于用户输入的数字)。暂时不用担心彩色框:那是下一部分。”

结果应该是这样的:

image

您可以忽略一些方 block 是彩色的这一事实。到目前为止,我想出了这个:

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

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

提前谢谢您!

最佳答案

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

这是一个使用 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)
}
}
}

关于javascript - 请求帮助 : setting up a grid using nested if loops (JavaScript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43152019/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com