안녕하세요! 간단하지만 유용한 JavaScript 실습을 진행해보겠습니다.
GitHub에서 JavaScript 스톱워치 실습을 살펴보고,
주요 코드를 분석하며 어떻게 동작하는지 알아보겠습니다.
1. 목표
이 실습은 HTML, CSS, 그리고 JavaScript만을 사용하여 간단한 스톱워치를 구현한 예제입니다. 실습을 통해 다음을 배울 수 있습니다.
1. JavaScript로 시간 측정 및 업데이트하는 방법
2. DOM 조작을 통한 동적인 UI 업데이트
3. 기본적인 이벤트 핸들링과 setInterval 활용
2. 전체 코드 구조
구조는 아주 간단합니다.
.
├── app.js // 기능 로직(JS)
├── style.css // 간단한 스타일
└── index.html // 전체 레이아웃(HTML)각 파일의 주요 내용은 다음과 같습니다.
2.1. index.html(HTML)
<html lang="ko"> <head> <meta charset="UTF-8" /> <title>Digital Clock | JS</title> </head> <link rel="stylesheet" href="style.css" /> </head> <body> <main> <h1>Stop Watch</h1> <!-- 시간 표시 영역 --> <div class="timeDisplay">00 : 00 : 00 : 000</div> <!-- 버튼 영역 --> <div class="btn"> <button id="startTimer">Start</button> <button id="stopTimer">Stop</button> <button id="resetTimer">Reset</button> </div> </main> <script src="script.js"></script> </body> </html>
HTML은 간단한 타이머 화면과 버튼으로 구성되어 있습니다.
id를 활용해 버튼을 제어합니다.
2. CSS.stopwatch {
text-align: center;
font-family: Arial, sans-serif;
}
h1 {
font-size: 48px;
margin-bottom: 20px;
}
button {
margin: 5px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
스타일링은 매우 심플하지만, 보기 좋은 UI를 제공합니다.
3. JavaScript
- 시간 계산 및 DOM 업데이트let timer;
let seconds = 0;
function formatTime(sec) {
const hrs = Math.floor(sec / 3600);
const mins = Math.floor((sec % 3600) / 60);
const secs = sec % 60;
return ${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')};
}
function updateDisplay() {
document.querySelector('h1').innerText = formatTime(seconds);
}
- formatTime : 초 단위로 시간을 입력받아 HH:MM:SS 형식으로 변환
- updateDisplay : DOM의 h1 태그를 업데이트
- 버튼 이벤트 핸들링document.getElementById('start').addEventListener('click', () => {
if (!timer) {
timer = setInterval(() => {
seconds++;
updateDisplay();
}, 1000);
}
});
document.getElementById('reset').addEventListener('click', () => {
clearInterval(timer);
timer = null;
seconds = 0;
updateDisplay();
});
- Start 버튼 : setInterval로 1초마다 카운트 증가
- Reset 버튼 : 타이머 초기화
#### 동작 화면
프로젝트를 로컬에 실행해보면 아래와 같은 동작을 확인할 수 있습니다.
- Start 버튼 클릭 : 시간이 시작됩니다.
- Reset 버튼 클릭 : 타이머가 00:00:00으로 초기화됩니다.
#### 직접 실행해보기
GitHub 저장소에서 프로젝트를 클론합니다.git clone https://github.com/InJungPark/js-stopwatch.git
cd js-stopwatch
브라우저에서 index.html 파일을 열어 실행합니다.
#### 마치며
이 스톱워치 실습은 JavaScript의 기초를 배우고 DOM 조작 및 시간 관리 로직을 익히기에 좋은 예제입니다. 간단한 구조이지만, 다양한 활용 가능성을 생각해볼 수 있는 실습이라고 생각합니다.