[JS 활용]숫자가 카운팅/카운트 되게 하는 제이쿼리 소스

 
 

숫자가 자동으로 올라가거나 내려가게 하는 소스

지정된 숫자에서 시작해서 지정된 숫자까지 카운팅이 필요한 경우 사용하면 좋을 소스 
홈페이지 디자인할때 동적인 효과를 두드러지게 보여질 수 있게하는 요소중의 하나
연혁이나  팀원의 수 혹은 그외에 다양하게 사용 가능한  소스 

 
 
 
 
 

HTML 마크업

<div>
  <h4 class="title">Since</h4>
  <span class="number">1700</span>
</div>

 
 

CSS

 
.title{
   text-align:center;
   display:block;
   font-size: 30px;
   color: #222;
   margin-bottom:10px
 }
 
 .number {
  text-align:center;
  display:block;
  width:150px;
  height:150px;
  line-height:150px;
  margin: 0 auto;
  font-size: 40px;
  color: #3f79f6;
  border:3px solid #3f79f6;
  border-radius: 50%;
}

 

JS

$(function() {
		  var cnt0 = 1700;

		  counterFn();

		  function counterFn() {

		    id0 = setInterval(count0Fn, 10);

		    function count0Fn() {
		      cnt0++;
		      if (cnt0 > 1980) {
		        clearInterval(id0);
		      } else {
		        $(".number").text(cnt0);
		      }
		    }
		  }
		});

 
 

결과

아래 Result 를 눌러주세요!