도움 요청 : 중첩 된 if 루프 (JavaScript)를 사용하여 격자 설정

중첩 된 if 문을 사용하여 격자를 설정하는 데 어려움이있었습니다. 그것은 비교적 간단한 작업이지만 나는 갇혀있는 것 같습니다!도움 요청 : 중첩 된 if 루프 (JavaScript)를 사용하여 격자 설정

이것은 학교 과제입니다. 지침은 다음과 같습니다 :

"사용자가 텍스트 입력에 8을 입력하고 버튼을 클릭하면 작은 사각형의 8 개의 행과 열을 그려야합니다. 이렇게하려면 두 개의 루프가 서로 내부에 중첩되어 있어야합니다 이 : 제곱은로 끝낼 수 있도록 (가장 안쪽) 루프 본체

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)

감사 y를 사전에 ou!

출처

2017-04-01 Gary Sidhu

는 기본적인 생각을 가지고처럼 보이는,하지만 몇 가지 빠진 부분이있다 - 당신이 보여주기 위해 jsfiddle 또는 유사한 환경을 설정하려고한다 당신이 일하는 것. 예를 들어'paper.rect() '는 무엇입니까? 하나의 문제는 내부 루프에서'x'를 매번 20 씩 증가시키는 것이지만, 예를 들어 각 새로운 행에 대해 0 위치로 다시 설정해야한다는 것입니다. –

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) 
    } 
    } 
}

출처

2017-04-06 10:23:51

도움 요청 : 중첩 된 if 루프 (JavaScript)를 사용하여 격자 설정

답변

관련 문제