메뉴 건너뛰기

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 18283
403 혹시 예전 서적인 "DHTML + 자바스크립트 프로그래밍"의 예제를 받을 수 있는 방법은 없는지요? 2 비만타쿠미 2018.09.26 116
402 한글html 1 키보드 향기 2020.03.29 934
401 한글 타이틀이 깨져 보입니다. 1 안스가리오 2020.01.06 116
400 표와 div span 4 키보드 향기 2020.04.05 109
399 페이지에 첨부하고 싶은 이미지의 위치에대해 궁금합니다 1 정택희 2017.02.13 277
398 페이지 247 에 있는 Open Challenge 05 의 CSS3로 태그 배치하기를 공부하고 있는데 질문드립니다. 1 file 워니고 2018.03.28 3879
397 테스트 관리자 2019.08.30 171
396 태그와 속성 2 tc0712 2021.09.08 72
395 크롬 오디오 자동재생 관련 질문입니다! 1 ^_^ 2018.09.30 449
394 코드 잘못된 부분을 봐주시면 정말 감사하겠습니다 1 file 입문한 사람 2020.04.01 608
393 캔버스 관련 질문 1 원그리기 2021.08.22 101
392 챕터2 연습문제 8번 김석현 2018.04.22 156
391 챕터 3의 10번 문제 1 컴공과 입문 2018.03.20 125
390 책을 종이책으로 구매했는데 1 ddd 2024.03.21 105
389 책을 마치며 7 은성 2017.04.13 492
388 책 151p 3장 오픈챌린지 문제질문입니다. 3 이상민 2019.07.19 239
387 짝수번 정답 3 idididid 2017.12.24 3139
386 질문입니다 1 1213 2018.03.06 420
385 질문드립니다. 1 ㅇㅇ 2020.06.03 306
384 질문 있습니다. 2 2021.08.19 134
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로