자바스크립트로 차르르 올라가는 숫자 표현하기 (오도미터 카운터)

퍼블리싱 작업 중 포인트가 차르르 올라가는 UI가 필요해서 만들어봤습니다.

다른 좋은 방법들도 많이 있을거라 생각됩니다.

숫자 값만 넘겨주면 천단위 기호를 포함하여 숫자가 차르르 올라갑니다.

 

아래는 그 결과입니다.

 

 

 

SCSS를 사용해서 $font-size만 입력하면 쉽게 사용할 수 있습니다.

 

먼저 숫자가 표시될 div 를 변수에 담아주시고

const container = document.querySelector('#container');

 

new OdometerCounter(숫자, div이름); 의 형식으로 실행하면 됩니다.
const testCounter = new OdometerCounter(1234567890, container);

 

아래는 전체 코드입니다.

 

자바스크립트

class OdometerCounter {
  constructor(number, selector) {
    this.number = number;
    this.selector = selector;
    this.render();
  }

  render() {
    this.selector.innerHTML = '';
    const formattedNumber = this.formatNumberWithCommas(this.number);

    for (let i = 0; i < formattedNumber.length; i++) {
      const char = formattedNumber[i];
      if (char === ',') {
        const comma = document.createElement('span');
        comma.textContent = ',';
        comma.classList.add('units');
        this.selector.append(comma);
      } else {
        const digits = document.createElement('div');
        digits.classList.add('digits');
        const nums = document.createElement('div');        
        nums.innerHTML = `
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        `;
        digits.append(nums);
        this.selector.append(digits);
        setTimeout(() => {
          nums.classList.add('digit-' + char);
        }, 100);
      }
    }
    const unit = document.createElement('span');
    unit.classList.add('units');
    unit.innerText = 'P';
    this.selector.append(unit);
  }

  updateNumber(newNumber) {
    this.number = newNumber;
    this.render();
  }

  formatNumberWithCommas(number) {
    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  }
}

const container = document.querySelector('#container');
const testCounter = new OdometerCounter(1234567890, container);

 

 

SCSS

$font-size: 2rem;
#container{
  display: flex;
  justify-content: flex-end;
  font-size: $font-size;
  line-height: $font-size * 1.5;
  font-weight: bold;
  height: $font-size * 1.5;
  overflow: hidden;
}
.digits{
  & > div{
    display: flex;
    flex-direction: column;
    font-size: $font-size;
    line-height: $font-size * 1.5;
    font-weight: bold;
    transition: all 1s ease-in-out;
    transform: translateY($font-size * 1.5);
  }
  .digit-0{ transform: translateY(0); }
  .digit-1{ transform: translateY(-($font-size * 1.5)); }
  .digit-2{ transform: translateY(-($font-size * 3)); }
  .digit-3{ transform: translateY(-($font-size * 4.5)); }
  .digit-4{ transform: translateY(-($font-size * 6)); }
  .digit-5{ transform: translateY(-($font-size * 7.5)); }
  .digit-6{ transform: translateY(-($font-size * 9)); }
  .digit-7{ transform: translateY(-($font-size * 10.5)); }
  .digit-8{ transform: translateY(-($font-size * 12)); }
  .digit-9{ transform: translateY(-($font-size * 13.5)); }
}
span.units{
  animation: commaIn 1s forwards;
  transform: translateY($font-size * 1.5);
}
@keyframes commaIn{
  0%{
    transform: translateY($font-size * 1.5);
  }
  100%{
    transform: translateY(0);
  }
}

 

 

html

<div id="container"></div>

 

 

(광고 클릭은 제작에 큰 도움이 됩니다.)