본문으로 건너뛰기

무료 온라인 집계 카운터

브라우저에 자동으로 저장되는 클릭 카운터. 사용자 지정 레이블과 단계로 여러 카운터를 추가합니다. 사람, 반복, 랩, 재고 등 무엇이든 셉니다.

한 번 로드하면 오프라인에서도 작동
로딩 중...

주요 용도

  • 이벤트에서 사람 세기문과 장소에서 출석, 인원 수 또는 수용력을 추적합니다.
  • 재고 및 주식 세기재고 계산 중에 위치를 잃지 않고 항목을 계산합니다.
  • 반복 및 세트 세기큰 탭 타겟으로 운동 반복, 세트 또는 라운드를 추적합니다.
  • 뜨개질 및 코바늘용 행 카운터프로젝트에서 행과 패턴 반복을 추적합니다.
  • 새, 야생동물 및 설문 조사 세기조류 계산, 설문 조사 및 현장 조사 중에 목격을 기록합니다.

사용 방법

이 계수기는 React 상태와 브라우저 내장 localStorage API를 사용해 전적으로 브라우저에서 실행됩니다. 서버도, 계정도 없으며 어떤 데이터도 전송되지 않습니다. 숫자는 페이지를 새로 고쳐도 자동으로 유지되고, 전체 화면 모드는 Screen Wake Lock API로 세는 동안 화면을 켜 둡니다.

  1. 1
    상태는 localStorage에 저장
    페이지가 로드되면 도구는 고정 키로 localStorage에 저장된 이전 카운터를 읽습니다. 각 카운터의 이름, 현재 값, 증가 단위, 음수 허용 여부는 JSON으로 직렬화되어 변경될 때마다 localStorage에 다시 기록되므로, 실수로 탭을 닫거나 새로 고쳐도 숫자가 유지됩니다.
  2. 2
    React 상태로 증가/감소
    + 또는 가운데의 큰 버튼을 누르면 설정한 증가 단위를 카운터의 현재 값에 더하는 업데이트 함수가 호출됩니다. 음수 허용이 꺼져 있으면 결과는 Math.max로 0 이상으로 제한됩니다. 키보드 단축키(Space/+로 증가, -/Backspace로 감소)는 활성 카운터를 대상으로 하는 window keydown 리스너에 연결되어 있습니다.
  3. 3
    Screen Wake Lock을 사용하는 전체 화면 모드
    전체 화면 모드에 들어가면 화면 전체가 탭 영역인 오버레이가 표시됩니다. 동시에 도구는 navigator.wakeLock.request('screen')으로 웨이크 락을 요청합니다. 이는 OS에 화면 절전을 막도록 요청하는 브라우저 API입니다. 탭이 백그라운드에 갔다가 다시 보이면 락을 자동으로 다시 얻습니다.
  4. 4
    합계를 보여 주는 여러 카운터
    두 번째 카운터를 추가하면 crypto.randomUUID()로 생성한 ID를 가진 새 항목이 만들어집니다. 카운터가 둘 이상이면 모든 값을 더한 합계가 카운터 목록 위에 표시됩니다. 각 카운터는 증가 단위, 초기화, 음수 허용 설정을 따로 가집니다.

관련 도구

자주 묻는 질문