반응형
관련자료
UI구현(JavaScript)
- JS연결
"스톱워치"폴더에 app.js라는 이름의 JavaScript 파일을 생성합니다. HTML 코드에 이 JavaScript 파일을 연결합니다
스톱위치 앱 - 과정7 - 변수 선언
스톱워치의 시작시간(startTime), 종료 시간(endTime), 실행 상태(running). 경과시간(duration)을 저장하는 변수를 선언 초기화합니다. let 키워드로 변수의 값을 나중에 변경할 수 있게 선언합니다.
스톱위치 앱 - 과정8 - HTML 요소를 참조하는 변수
DOM(Document Object Model)을 조작하여 동적으로 변경하기 위해 HTML에서 ID요소를 가진 timer, statBtn, stopBtn, resetBtn 변수에 할당합니다. 변수는 똑같은 이름으로 const 키워드로 선언 할당합니다
스톱위치 앱 - 과정9 - 스톱워치 시작하는 함수
시작 함수가 시작할때 1️⃣스톱워치가 중복으로 실행되는 것을 방지하는코드 2️⃣스톱워치가 실행 상태 변경 3️⃣시작 시간을 현제 시간으로 설정 4️⃣ 1초 마다 updateTime 함수를 실행하여 '시간의 경과'를 반영합니다. updateTime함수는 현재 시간과 startTime의 차이를 계산하여 경과 시간을 갱신하고, 이를 화면에 표시하는 역할을 수행합니다.
스톱위치 앱 - 과정10 - 스톱워치 중지 함수
중지 함수가 작동 되면, 1️⃣스톱위치가 실행중이 아니면 함수를 종료합니다. 2️⃣스톱워치가 중지 상태가 됩니다. 3️⃣현재 시간을 저장합니다. 4️⃣시작 함수시작한 시간과 중지 함수시작한 차이를 밀리초 단위로 계산하고 초로 단위를 정수로 변환 합니다. 5️⃣계산된 시간을 duration변수에 더합니다. 다시 시작 버튼 누렸을때 경과시간을 저장함이다
스톱위치 앱 - 과정11 - 스톱워치 리셋함수
1️⃣스톱위치를 중지 상태 2️⃣경과시간 0으로 초기화 3️⃣화면에 표시되는 시간 초기화
스톱위치 앱 - 과정12 - 업데이트 함수
1️⃣스톱워치가 실행중 아니면 종료, 즉 중지 상태면 작동하지 않는다. 2️⃣작동시간 저장 3️⃣초를 계산하는데 경과 시간 더한 값을 계산하여 일시 중지되었다가 시작 되더라도 총 경과 시간을 계산할 수 있습니다. 4️⃣계산된 초를 시간, 분, 초로 변환합니다. 5️⃣타이머 텍스트에 업데이트 합니다.
스톱위치 앱 - 과정13 - pad함수
숫자를 2자리 변환, 예를들어 9 -> 09
스톱위치 앱 - 과정14 - 버튼에 이벤트 리스너를 추가
각 버튼 클릭시 함수 작동하게 합니다
스톱위치 앱 - 과정14
배포
JS
// 변수 선언과 초기화
let startTime, endTime, running, duration = 0;
// HTML 요소를 참조하는 변수
const timer = document.getElementById('timer');
const startBtn = document.getElementById('startBtn')
const stopBtn = document.getElementById('stopBtn')
const resetBtn = document.getElementById('resetBtn')
// 스톱워치 시작 함수
function start() {
//중복 실행 방지
if(running) return;
//스톱워치 실행상태
running = true;
// 현제 시간 설정
startTime = new Date();
// 1초 마다 updateTime 함수 실행
setInterval(updateTime, 1000);
}
//중지 함수
function stop() {
//실행 중이면 동작 안함
if(!running) return;
//스톱위치 중지 상태로 변경
running = false;
//중지시간 저장
endTime = new Date();
//시작 시간부터 중지 시간을 초단위로 계산
const seconds = Math.floor((endTime.getTime() - startTime.getTime())/1000)
//경과 시간을 저장
duration += seconds;
}
function reset(){
//스톱위치 중지 상태로 변경
running = false
//경과 시간 0으로 초기화
duration = 0
//타이터 텍스트를 00:00:00 설정
timer.textContent = '00:00:00'
}
function updateTime(){
// 실행 중이 아니면 아무 동작도 하지 않음
if(!running) return
// 현재 시간을 가져옴
const now = new Date();
// 시작 시간부터 현재 시간까지의 시간을 초 단위로 계산하고, 경과 시간을 더함
const seconds = Math.floor((now.getTime() - startTime.getTime())/1000 ) + duration
// 시간, 분, 초로 변환
const hours = Math.floor(seconds/ 3600)
const minutes = Math.floor((seconds % 3600) / 60)
const secondsDisplay = seconds % 60
// 타이머 텍스트를 업데이트
timer.textContent = `${pad(hours)}:${pad(minutes)}:${pad(secondsDisplay)}`;
}
// 숫자를 2자리로 변환
function pad(number) {
return number < 10 ? '0' + number : number;
}
// 시작, 멈춤, 리셋 버튼에 이벤트 리스너를 추가
startBtn.addEventListener('click',start)
stopBtn.addEventListener('click',stop)
resetBtn.addEventListener('click',reset)
깃허브
https://github.com/IdoCleanCode/app/tree/master/%EC%8A%A4%ED%86%B1%EC%9B%8C%EC%B9%98
반응형
