JS) 숫자 카운트 setInterval(), setTimeout(), toLocaleString();

안녕하세요 찐망고 입니다.

이전 포스팅에 숫자 카운팅 하는 코드를 올려봤는데요..

이번엔 한개가 아닌 두개나 세개의 요소에 동시에 숫자가 카운팅되게 코드를 짜볼거에요

 

일단 이전포스팅을 참고하시고~~

2023.06.07 - [WEB/JS코드] - JS) 숫자 카운트 setInterval(), setTimeout()

JS) 숫자 카운트 setInterval(), setTimeout()

 

// HTML

<div class="video-txt">
        <div class="txt-box year">
            <div class="count-box">
                <span class="count">0</span>
                <span>년</span>
            </div>
            <p>#함께한시간</p>
        </div>
        <div class="txt-box store">
            <div class="count-box">
                <span class="count">0</span>
                <span>개</span>
            </div>
            <p>#가맹점수</p>
        </div>
        <div class="txt-box app">
            <div class="count-box">
                <span class="count">0</span>
                <span>명</span>
            </div>
            <p>#컴포즈App회원</p>
        </div>
    </div>

컴포즈 사이트를 리뉴얼 하는 학생이 있는데..

컴포즈 숫자 카운팅

이 부분을 살리고 싶은거죠~ 그맘 아주 이해합니다.

각각의 숫자를 따로따로 카운팅되게 코드를 짜볼까 해요

 

//JS

const counter = (counterElement, max) => {
    let now = max;

    const handle = setInterval(() => {
        counterElement.innerHTML = Math.ceil(max - now).toLocaleString();

        if (now < 1) {
            clearInterval(handle);
        }

        const step = now / 10;
        now -= step;
    }, 50);
};

window.onload = () => {
    const counters = document.querySelectorAll('.count');
    const maxValues = [9, 2201, 6549863];

    counters.forEach((counterElement, index) => {
        setTimeout(() => counter(counterElement, maxValues[index]), 0);
    });
};

기본 코드랑 달라진게 일단 

counterElement.innerHTML = Math.ceil(max - now).toLocaleString();

toLocaleString() 함수를 사용하여 숫자를 언어별로 구분하여 문자열로 변환시키는 내장함수 입니다.

숫자를 통해 형식, 천 단위 구분 기호, 소수점 등의 현지화된 형식에 맞게 표시합니다.

컴포즈 app회원이 1000명이 넘기다보니 구분기호가 필요해서 넣어줬구요

 

 

그다음 const maxValues = [9, 2201, 6549863]; 값을 배열형태로 데이터를 지정했는데요

각 카운터의 최대숫자 값입니다.

counters.forEach((counterElement, index) => {
    setTimeout(() => counter(counterElement, maxValues[index]), 0);
});

counter()함수는 counterElement와 maxValues[index]를

매개변수로 받아 해당 카운터요소를 업데이트 하는 역할을 합니다.

 

 

See the Pen js)숫자카운팅 by 찐망고 (@nnwbliyz-the-styleful) on CodePen.