각 자릿수별로 1씩 증가하는 숫자 롤링 카운터 만들기 | HTML, Javascript, jQuery

각 자릿수별로 1씩 증가하는 숫자 롤링 카운터 만들기 - 숫자 롤링 카운터 (2)

---

0부터 1씩 증가하는 롤링에 이어 각 자릿수별로 1씩 증가하는 롤링을 구현해 보겠습니다.

 

Environment

• HTML
• Javascript

Thirdparty

• jquery

---

구현

▪️퍼블리싱

숫자가 표시될 요소를 생성합니다.

<div id="cnt"></div>

 

▪️기능

반복해서 사용할 데이터들을 변수 정의합니다.

const jqEl = $("#cnt");	// 숫자 표시할 요소
const targetNum = 10;	// 표시할 최종 숫자
const strNum = targetNum.toString(); // 숫자 데이터 타입 string
const targetNumLen = strNum.length; // 숫자 자릿수

 

각 자리에 표시할 데이터

각 자릿에 표시할 데이터를 배열로 관리합니다.

예를 들어, 표시할 수가 739라면 아래와 같이 데이터가 위치하겠죠.

자릿수 크기의 배열을 선언하고 0으로 초기화합니다.

let arr = new Array(targetNumLen).fill("0");

 

자릿수별로 1씩 증가

각 자릿수는 0부터 9 사이의 숫자로 이루어져 있으므로, 0부터 9까지 1씩 증가하는 반복문을 생성합니다.

for (let i = 0; i <= 9; i += 1( {
	// TODO
}

자리의 원본 수와 현재 수를 비교하여 같으면 원본 수를, 다르면 원본 수를 배열에 할당합니다.

const n = strNum[0];
// 자리의 최종 수와 현재 수 비교
if (Number(n) <= i) {
	arr[j] = n;
} else {
	arr[j] = i.toString();
}

 

업데이트된 배열 데이터를 표시합니다.

jqEl.text(arr.join(""));

일정 시간 sleep 처리합니다.

await sleep(70);

👇👇 sleep 메소드 구현 포함 보러가기 👇👇

0부터 1씩 증가하는 숫자 롤링 카운터 만들기 | HTML, Javascript, jQuery

---

완성❗

전체 소스 보기

const jqEl = $("#cnt");
const targetNum = 739;
const strNum = targetNum.toString();
const targetNumLen = strNum.length;

async function rolling() {
    let arr = new Array(targetNumLen).fill("0");

    for (let i = 0; i <= 9; i += 1) {
    	for (let j = 0; j < targetNumLen; j += 1) {
            const n = strNum[j];
            // 현재 숫자가 해당 자리수 숫자와 같으면
            if (Number(n) <= i) {
            	arr[j] = n;
            } else {
            	arr[j] = i.toString();
            }
        }

        jqEl.text(
            Number(str.join(""))
                .toLocaleString(
                    navigator.language,
                    {minimumIntegerDigits: targetNumLen,}
            	)
        );
        await sleep(70);
    }
}