메뉴 건너뛰기

2017.04.07 19:08

10장 오픈챌린지

조회 수 2247 댓글 5

눈내리는 화면은 간단하게 제작했습니다.

 

하지만 setInterval 속도를 

div마다 다르게 주고 싶은데 그건 불가능 한가요?

setIntervel("timeOutCode(div[i])",msec) 형식으로 해보려고 했는데

잘 안되더라구요..

?
  • ?
    황기태 2017.04.08 13:57

    잘 안됩니다. 이유를 지금부터 설명합니다.
    예를 들어 이렇게 하면
    setIntervel("timeOutCode(div[i])",1000)

    function timeOutCode(x) {
    ...
    }
    이 함수의 매개변수 x의 값에는 "div[i]"가 그대 전달되어 옵니다.

    학생이 얻고자 하는 것은 div[0], div[1] 과 같은 것이 겠지요.
    그러므로사실상 다음과 같이 만들어져야 합니다.
    setIntervel("timeOutCode(div[0])",1000)
    setIntervel("timeOutCode(div[1])",1000)

    그래서, 예를들어 보이면 다음과 같이 만들어져야 합니다.
    for(var i=0; i<3; i++) {
    var s = "div[" + i + "]";
    setInterval("timeOutCode(" + s + ")", 1000) ;
    }

    for 문에 의해 다음 3개의 호출문이 실행되지요
    setIntervel("timeOutCode(div[0])",1000)
    setIntervel("timeOutCode(div[1])",1000)
    setIntervel("timeOutCode(div[2])",1000)

    천천히 살펴보면 이해가 될 것입니다.
    그런데 학생은 몇학년이며, 어떤 강의를 듣고 있나요?

  • ?
    은성 2017.04.10 12:59
    맞습니다 타이머가 여러번 호출되어서 뜻대로 잘 되지 않았습니다 ㅠㅠ..
    그럼 결국 눈내리는 속도를 조절하는 방법은 없는건가요 ? 현재 이 책의 범위를 벗어나는 부분이라면, 어떤것을 배워야할까요?
    현재 저는 26살이며 웹프로그래밍에 관심이 생겨 4월 3일 부터 강의 없이 독학중입니다. 그래서 질문이 많습니다..ㅠㅠ 죄송합니다
  • ?
    황기태 2017.04.10 14:59

    당연히 눈내리는 속도를 조절할 수 있지요.
    프로그램으로 해결하지 못하는 문제는 거의 없습니다.
    다음과 같이 코딩하면 되지요
    var speed = [200, 500, 1000];
    for(var i=0; i<3; i++) {
    var s = "div[" + i + "]";
    setInterval("timeOutCode(" + s + ")", speed[i]) ;
    }

    이코드는 다음과 같은 3 개의 타이머를 작동시킵니다.
    setIntervel("timeOutCode(div[0])",200); // 0.2초 간격으로
    setIntervel("timeOutCode(div[1])",500); // 0.5초 간격으로
    setIntervel("timeOutCode(div[2])",1000); // 1초 간격으로

    이 책의 범위를 넘어서는 것은 아닙니다. 그것은 프로그래밍에 대한 경험에 관한 것이지요.

    다른 언어 든 많은 프로그래밍 연습이 되어 있어야 하는 것입니다.

    열심히 하면 좋은 결과가 있을 것입니다.

  • ?
    은성 2017.04.10 15:34
    답변 감사드립니다. 하지만 가르쳐주신대로 코딩을 수정했더니 속도가 중첩이 됩니다. 제 코드에 문제가 있는 것으로 보여지는데 제가 만든 코드는 다음과 같습니다.

    setInterval("Rotate()",20);
    var sum=[];
    for(var i=0; i<80; i++){
    sum[i]=0;
    }
    var topPoint=[];
    var div=[];
    for(var i=0; i<80; i++){
    div[i]=document.createElement("div");
    div[i].innerHTML="*";
    document.body.appendChild(div[i]);
    var a =Math.random()*1000;
    var left=Math.floor(a);
    var b =Math.random()*700;
    var Top=Math.floor(b);
    div[i].style.left=left+"px";
    div[i].style.top=Top+"px";
    topPoint[i]=Top;
    }
    function Rotate(){
    for(var i=0; i<80; i++){
    sum[i]++;
    div[i].style.top=topPoint[i]+sum[i]+"px";
    var Max=topPoint[i]+sum[i];
    if(Max>700 ){
    sum[i]=0;
    topPoint[i]=0;
    div[i].style.top=0+"px";
    }
    }
    }

    조금더 간략하게 혹은 완성도 높게 만들려면 어디를 수정해야 할까요?
    불필요한 코드가 있다면 어떻게 더 효율적으로 작성할 수 있을까요?
  • ?
    황기태 2017.04.10 16:05

    글쎄 정확하진 않지만,
    지금 코드는 doRotate()가
    20ms 초당 반복되면
    div[i]가 바닥에 떨어지기 전에 위에서 부터 다시 떨어지게 하는 것은 같은데...
    한번 체크해보세요.

     

    그리고 setInterval("timeOutCode(),....)을 부르는 코드는 어디에 있나요?

     


QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.20 18262
263 a<<b가 뭔가요? 1 2020.07.01 103
262 예제 9-18번 질문 1 초보 2020.06.21 84
261 선 색 변경이 안됩니다 1 모르겠어요 2020.06.19 199
260 11장 실습문제 4번 1 웹프 2020.06.17 456
259 궁금한점이 있습니다. 1 hayio 2020.06.17 80
258 11장 실습문제 7번 응용 ㅇㅇ 2020.06.16 154
257 6장 오픈챌린지 1 이민수 2020.06.15 232
256 6장4번 1 이민수 2020.06.15 135
255 6장 7번 1 이민수 2020.06.15 212
254 6장 7번 좀 알려주세요 ㅜㅜ 1 어려워여 2020.06.14 589
253 예제 7-6 에서 응용을 하고 싶어서 여쭙고 싶습니다. 1 file 배우고 익히는 초심자 2020.06.14 245
252 13-7 예제 1 궁금이 2020.06.14 146
251 선생님 재질문 드립니다. 1 file 입문한 사람 2020.06.12 150
250 12장 연습문제 4번 HTML 요청 1 file 윤세아 2020.06.10 641
249 setTimeout 질문드립니다. 3 file 웹프공부중 2020.06.09 130
248 스크립트에서 document.write로 표 만들기 질문드립니다. 1 file 입문한 사람 2020.06.08 1108
247 실습문제 1 키보드 향기 2020.06.07 120
246 6단원 실습문제 관련 질문합니다. 1 질문 2020.06.06 110
245 예제 6-24관련 질문드립니다. 3 초보 2020.06.05 67
244 질문드립니다. 1 ㅇㅇ 2020.06.03 306
목록
Board Pagination Prev 1 ... 3 4 5 6 7 8 9 10 11 12 ... 21 Next
/ 21
위로