메뉴 건너뛰기

2017.04.07 20:08

10장 오픈챌린지

조회 수 2242 댓글 5

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

 

하지만 setInterval 속도를 

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

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

잘 안되더라구요..

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

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

     

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

     


QnA

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

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.21 18173
401 span과 text-align : center; 에 관한 문제입니다. file 2019.10.15 278596
400 11장 6번 으엉 2019.11.27 187037
399 placeholder속성 1 khl 2017.04.08 85504
398 11장 6번 1 mj 2018.11.29 67038
397 웹 프로그래밍 책 답안지 1 mumu 2017.03.06 14035
396 실습문제 8-2 (3) 13412 2018.11.08 12303
395 살다 살다 답을 반쪽만 주는 책은 처음입니다 1 음음 2019.01.24 8842
394 Open Challenge 와 실습문제 자료 2 김원상 2017.04.29 7443
393 14장 예제 사라진 건가요 1 ... 2021.03.09 4077
392 localhost 관련 문의 3 소년정 2018.02.20 4032
391 페이지 247 에 있는 Open Challenge 05 의 CSS3로 태그 배치하기를 공부하고 있는데 질문드립니다. 1 file 워니고 2018.03.28 3844
390 ㅠㅠ..질문좀 드리겠습니다.. 1 은성 2017.04.18 3834
389 연습문제 답안지 2 vdncnck 2017.03.28 3214
388 짝수번 정답 3 idididid 2017.12.25 3101
387 8장 연습문제 실습문제 4장 2 student 2017.05.08 2850
» 10장 오픈챌린지 5 은성 2017.04.07 2242
385 open challenge 05 2 hardworking 2017.03.29 2202
384 5장 연습문제 홀수 번 질문 1 채XX 2019.06.17 1985
383 HTML을 열심히 공부중인 학생입니다 3 열심히 하자 2018.05.30 1962
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로