무료 온라인 스톱워치

사용 방법

이 스톱워치는 단조 증가 고해상도 타이머인 브라우저 내장 performance.now() API를 사용해 전적으로 브라우저에서 실행되며, 매 애니메이션 프레임(보통 초당 60회) 표시를 다시 그리는 requestAnimationFrame 반복으로 구동됩니다. 어떤 시점에도 서버는 관여하지 않습니다.

1. 1
   performance.now()로 시간 측정

   시작을 누르면 도구가 performance.now()로 기준점을 기록합니다. 매 애니메이션 프레임마다 현재 performance.now() 값에서 그 기준을 빼 경과 밀리초를 계산하므로, setInterval을 반복 호출할 때 생기는 시계 오차 문제를 피합니다.
2. 2
   requestAnimationFrame이 표시 구동

   고정 간격 타이머 대신 숫자 표시는 requestAnimationFrame 반복 안에서 업데이트됩니다. 이렇게 하면 표시가 브라우저 자체 렌더링 파이프라인과 동기화되어 1/100초 카운터가 부드럽게 넘어가며 화면 새로 고침보다 빠르게 실행되지 않습니다.
3. 3
   localStorage로 진행 중인 세션 유지

   시작, 정지, 랩 이벤트마다 도구는 실제 시각 기준 타임스탬프를 포함한 스냅샷을 localStorage에 기록합니다. 실행 중에 페이지를 새로 고치면 스톱워치가 그 기준을 읽고 기록 이후 몇 밀리초가 지났는지 계산해 올바른 시간부터 다시 시작합니다.
4. 4
   랩을 탭 구분 텍스트나 CSV로 내보내기

   각 랩은 구간 시간(이전 랩 이후 차이)과 누적 합계를 모두 저장합니다. 모두 복사는 navigator.clipboard.writeText로 탭 구분 행을 클립보드에 쓰고, CSV 다운로드는 UTF-8 BOM Blob을 만들어 가져오기 마법사 없이도 Excel에서 올바르게 열립니다.

관련 도구