[Javascript] 자바스크립트로 카운팅 해보기 / count 세어보기

결과물

 

사진은 멈춰있지만, 숫자를 정해놓은 단위로 올리는 방법이다. 

 

 

HTML

<div class="counting">
  <div class="cut-box">
    <p>개인정보유출</p>
    <p>피해 재산</p>
    <p>피해건수</p>
  </div>
  <div class="cut-num">
    <p class="c1">1,557억원</p>
    <p class="c2">19,000만명</p>
    <p class="c3">4,443건</p>
  </div>
 </div>

 

CSS

.counting {display: flex; justify-content: center; align-items: center; height: 500px; background: green; font-size: 82px; color: #fff; }
.cut-num {margin-left: 50px;}

 

Javascript

function counting(name, max, step, unit){ //counting이라는 함수를 정의하고, 네 개의 매개 변수를 받겠다는 뜻이다.
//▲여기서 name은 count할 요소의 선택자, max는 최대값, step은 증가 단위, unit는 단위이다. (달러나.. 원 등등)
        let count = 0; // count라는 변수를 0으로 초기화하고, 이 변수는 숫자를 나타내며 증가할 값을 뜻한다.
        const element = document.querySelector(name); //메서드를 사용하여 전달될 name(요소)에 해당하는 HTML요소를 선택하고 이 것을 엘리먼트 상수에 저장한다.

        const interval = setInterval(function(){ //주기적으로 함수를 실행하는 것을 셋인터벌이라고 한다.
          if(count >= max){ //만약 COUNT가 MAX 이상이 되면 클리어인터벌을 호출하여 인터벌을 종료하고 함수를 종료할 것이라는 뜻
            clearInterval(interval);
            return false;
          }
          count += step; // COUNT에 STEP을 더하고, 엘리먼트의 innerHTML을 현지화된 숫자 형식으로 업데이트한다.
          element.innerHTML = new Intl.NumberFormat().format(count) + unit; //NumberFormat는 천 단위 구분 기호를 쉼표로 나타내주는 것이다. ex) 1000 -> 1,000 각 나라별로 숫자 형식에 맞게 표시해주는 함수임.
        },20); // 20ms초마다 실행되는 함수의 끝을 나타낸다. 
      }

//counting 함수를 호출하여 각각의 HTML 요소에 대해 숫자를 증가시키고 표시한다. 
counting('.c1', 5000, 100, '억원');
counting('.c2', 19000, 300, '만명');
counting('.c3', 4443, 100, '억원');

 

 

자세한 설명은 자바스크립트 주석으로 달아놨으니 확인할 것.