메뉴 건너뛰기

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 18279
203 안녕하세요. 몽구스 다른 컴퓨터에서 서버 접속 문의 드립니다. 1 file 2018.03.14 225
202 이거 1장 부터 시작해서 답을 어디서 확인해야 되죠? 2020.09.27 224
201 5단원 실습 6-2번 질문합니다 2 공부해염 2019.04.13 222
200 ch1 이론문제 1번 2 새내기 2021.03.06 221
199 3장 실습문제 5번문제에 대해 질문이있습니다. 1 CHUL 2020.04.09 221
198 자바스크립트로 배경이미지슬라이드 만들어볼려고 열심히 노력하는데 1 hansung 2019.06.24 219
197 5장 내용 중 궁금한 점 있습니다! 1 file 2021.10.15 215
196 실습문제 6장 6-(1) 어떻게 하는 건가요? 1 초보자 2020.12.23 215
195 6장 7번 1 이민수 2020.06.15 215
194 7장 실습문제 1번 질문 드립니다. 1 111 2019.10.15 215
193 예제에 나오는 이미지와 동영상파일은 어디서 다운받을 수 있나요... 1 gofkdvjvl 2017.09.21 215
192 8장 실습 문제 5번 3 아리 2019.12.04 214
191 2장 오디오 실습문제에 대해서 질문이있습니다 1 ㅇㅇㅇ 2019.09.19 213
190 실습문제 5장 9번 1 file 2020.10.08 212
189 이거 오타인가요? 1 HTML5 2019.04.11 212
188 안녕하세요 관리자님 실습 문제 짝수본 zip 파일은 제공 되지 않는 건가요? 1 문의 2022.02.25 210
187 5장 오픈챌린지 관련 시급함 2022.04.16 204
186 9장 실습문제 10번 질문이요 2 mmii 2021.06.06 203
185 명품 html5+ 수정판 p.89 예제 2-21 파일 다운로드 링크 만들기 실행 오류 문의 1 file mikael 2021.04.15 202
184 실습문제 6장 3번-2 1 어려워 2019.11.15 200
목록
Board Pagination Prev 1 ... 6 7 8 9 10 11 12 13 14 15 ... 21 Next
/ 21
위로