Question

我正在试图弄清楚如何使我的代码工作，看起来像这样：

GOAL

问题是：

创建一个HTML页面，其中包含Raphaël纸张对象的文本输入，按钮和容器。我们将让用户在表单中输入一个数字并单击按钮，然后绘制一个n×n的正方形网格。如果用户在文本输入中输入8并单击该按钮，则应绘制八行和一些小方块。要做到这一点，你需要两个相互嵌套的for循环，如下所示：*

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

在（最里面的）循环体中，在纸上画一个小方块，从循环计数器计算出x和y值，这样正方形就会以网格图形结束。

这是我的代码：

x = 0
y = 0
grid = function() {
	entered_text = $('#howmany').val();
	for (row = entered_text; row <= 15; row += 1){
	  	for (col = entered_text; col <= 15; col += 1) {
			r = paper.rect(x, y, 20, 20);
			x = r * col
		}	
		y = r + row;
	}
}


setup = function() {
  paper = Raphael('svg', 400, 400)
  jQuery('#start').click(grid)
 
}

jQuery(document).ready(setup)

<!DOCTYPE html> 
<html lang="en">
<head> 
<meta charset="UTF-8" />
<script src="http://cmpt165.csil.sfu.ca/js/jquery-3.1.1.js"></script>
<script src="http://cmpt165.csil.sfu.ca/js/raphael-2.1.4.js"></script>
<script src="logic.js"></script>
<title>Exercise 11</title>
</head> 
<body>
<h1>Exercise 11</h1>


<div class="gridsize">Grid Size:
<input type="text" id="howmany" />
<button id="start">Go</button></div>

<div id="svg"></div>

</body>
</html>

Answer 1

即将结束，您只是将void mouse(int button, int state, int mx, int my) { [...] if (state == GLUT_DOWN) { x = mx; y = glutGet(GLUT_WINDOW_HEIGHT) - my; }值（非数字）乘以r，这将返回col，这不是好事。然后我还将NaN转换为数字并修改了entered_text循环。所以我继续进行更新。如果您想要填充，只需将所有for增加到20。

x = 0
y = 0
grid = function() {
	entered_text = Number($('#howmany').val());
	for (row = 0; row < entered_text; row += 1){
	  	for (col = 0; col < entered_text; col += 1) {
			paper.rect(20 * col, 20 * row, 20, 20);
		}	
	}
}


setup = function() {
  paper = Raphael('svg', 400, 400)
  jQuery('#start').click(grid)
 
}

jQuery(document).ready(setup)

使用jquery创建网格 - 代码未完成

1 个答案: