21.01.04

1. timing

- 브라우저에서는 특정시간마다 어떤일을 수행할 수 있다.
- 특정 시간 후에 어떤 일을 수행 할 수도 있다.

<script>
        var i =0;
        var msg = document.getElementById("cnt");
        var inter;
        var btn = document.getElementById('btn');
        function interval(){
            //버튼을 누르면 clearInter()가 실행되기 전까지 누를 수 없게 만들자
            //버튼 객체.setAttribute('disabled,'true')
            btn.setAttribute('disabled','true');//함수 실행시키면 비활성화
            //setInterval 특정 간격마다 함수를 반복
            //setInterval(실행할 함수, 반복되는 간격)
            inter = setInterval(function(){
                i++;
                msg.innerHTML = i;//표시
            },1000);    
        }

- setInterval(function(){},1000); : 1초마다 함수를 실행해라
- 위 내용에서는 1초마다 i를 증가시키고 msg.innerHTML에 i 삽입
- btn.setAttribute('disabled','true'); : 버튼객체를 비활성화 해준다

function clearInter(){
            clearInterval(inter);
            btn.removeAttribute('disabled');//요소에 주어진 특성 제거
            i = 0;//초기화
            msg.innerHTML = i;//초기화
        }

- clearInterval(); : 설정한 interval객체를 중지시킨다. interval객체는 변수안에 있어야한다.

function setTime(){
            //setTimeout : 특정 시간 후에 함수를 실행
            //setTimeout(실행할 함수, 시간)
            setTimeout(function(){
                alert('3초가 지났습니다.');
            },3000);
        }

- setTimeOut(function(){},1000); : 1초 후 함수를 실행해라(1번만 실행)
- 위 내용에서는 3초후 alert로 경고창 띄우기

2. pagemove

    <script>
        var i = 5;
        var count = document.getElementById('cnt');
        var inter;
        //1.10~0까지 감소 내용 표현 vytl
        inter = setInterval(function(){
            i--;
            count.innerHTML = i;
            //2.10초 후에 구글 페이지로 이동
            // if(i==0){
            //     location.href ="https://www.google.co.kr";
            // }
        },1000);
         setTimeout(function(){
        //     alert('페이지가 이동됩니다.');
             location.href ="https://www.google.co.kr";
         },5000);
    </script>

- n초 후에 페이지가 변경되도록 하는 코드
- setInterval로 1초에 한번 i를 감소시키며 count의 html에 i를 넣어준다.
- setTimeout으로 5초후에 구글 페이지로 이동
- location.href = "url" : url로 이동하는 코드

3. download바 만들기

    <script>
        var bar = document.getElementById('mybar');
        var btn = document.getElementsByTagName('button')[0];
        var mask = document.getElementById('mask');
        function goprogress(){
            //1.mask 보이기
            mask.style.display = "block";
            //2.바 커지기
            var i = 0;
            var inter = setInterval(function(){
                if(i<100){
                    i++;
                    bar.style.width = i+"%";
                    bar.innerHTML = i+"%";//3.숫자 변경되게
                }else{
                    clearInterval(inter);
                    //4.100%되었을 경우 경고창 뜨기.
                    alert("다운로드 완료");
                    mask.style.display = 'none';
                }
            },20);
        }
    </script>

- i가 100보다 작다면 bar의 너비가 1씩 증가하고, bar의 html도 1씩 증가한다.
- i가 백과 같거나 커졌다면 중지시키고 alert로 "다운로드 완료" 띄우기

4. animation

    <script>
        var ani = [-21, -291, -537, -781, -1068, -1310];
        var screen = document.getElementById('screen');
        function start(){
            var i = 0;
            var x = 0;
            obj = setInterval(function(){
                i++;
                x = x+10;
                if(i==ani.length){
                    i=0;
                }
                screen.style.background = 'url(sprite.png)' +ani[i]+'px 0';
                screen.style.left = x;
            },100);
        }
        function stop(){
            clearInterval(obj);
        }
    </script>

- 스프라이트 이미지로 달려가는 것처럼 보이게 만들기
- 이미지 픽셀을 배열로 정해 놓고 start함수 동작 시 i가 1씩 증가하며 픽셀이 바뀌게 한다.