퍼블리싱/javascript&jQuery

제이쿼리를 이용해 타이머만들기

도라미도라미 2018. 5. 12. 21:45

카운트 업을 이용해 이미지 슬라이드 만드는 방법!


감기가 걸려, 코맹맹이가 되었다. 끙끙거리며 블로그를 써본다.

제이쿼리에서 반복적으로 동작이 발생할때 많이 쓰는 방법이다. 


먼저 카운트 업 타이머를 만들어 보자.

  

1. 카운트 업 타이머를 만들 html 마크업과 css 설정을 해준다.  

1
2
3
4
5
6
 <style>
        .countUp{font-size: 50px;text-align: center;} 
 </style>
 <body>
    <p class="countUp">0</p>  
 </body>
cs



2. 스크립트를 열어 제이쿼리를 만들어본다.

 - 변수를 하나 지정해주고

 - 함수를 호출해, 증가변수(n++)를 넣어준다. 

 - 숫자가 들어갈 p.countUp를 불러 메소드 text로 숫자를 넣어준다. 

1
2
3
4
5
6
7
8
9
10
<script>
    $(function(){
        var n = 0            // 변수를 지정해준다. 
        function countUp(){   //함수를 호출해준다. 
            n++               //1씩 증가하는 증가함수를 넣어준다.   
        $('.countUp').text(n) // p.countUp에 카운트를 시킬 숫자을 넣어준다. 
            }
        
        });
 </script>
cs



3. 1씩 숫자를 증가 시키는 것을 반복 실행시킨다.

1
2
3
4
5
6
7
8
9
10
11
12
<script>
    $(function(){
        var n = 0        
        function countUp(){  
            n++             
        $('.countUp').text(n) 
            }
    
        setInterval(countUp,1000);
        
        });
    </script>
cs



그러면 이렇게 실행된다! 

0

다른 다양한 방법이 있으나 이걸 배웠으니 적어본당.