반응형
사진은 멈춰있지만, 숫자를 정해놓은 단위로 올리는 방법이다.
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, '억원');
자세한 설명은 자바스크립트 주석으로 달아놨으니 확인할 것.
'Javascript > Javascript' 카테고리의 다른 글
[Javascript] 슬라이드 배너 자바스크립트로 다뤄보기 (fadeIn, top, left..) (0) | 2023.12.09 |
---|---|
[Javascript] 자바스크립트로 드롭다운 메뉴 6종류 다뤄보기 (0) | 2023.12.09 |
[Javascript] forEach/for..in/for..of/for 구문 (0) | 2023.12.06 |
[Javascript] 코딩 기본 용어 정리(property/array...framework..) (0) | 2023.12.04 |
[Javascript] addEventListener 사용법과 이벤트(Event) 종류 / onClick의 차이 (0) | 2023.12.04 |