반응형
📄 StopWatch 요구 사항
- Start 버튼을 누르면 시간이 증가합니다.
- Stop 버튼을 누르면 시간이 정지합니다.
- Reset 버튼을 누르면 시간이 초기화됩니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<h1>StopWatch</h1>
<p><span id="seconds">0</span>:<span id="tens">0</span></p>
<button id="button-start">Start</button>
<button id="button-stop">Stop</button>
<button id="button-reset">Reset</button>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
// 각 요소 변수에 저장하기
const appendTens = document.getElementById('tens');
const appendSeconds = document.getElementById('seconds');
const buttonStart = document.getElementById('button-start');
const buttonStop = document.getElementById('button-stop');
const buttonReset = document.getElementById('button-reset');
// 전역 변수 지정
let seconds = 0; // 1 seconds, 1초
let tens = 0; // 100 tens -> 1 seconds
let interval; // 초기화를 위한 변수
// start button click function
buttonStart.onclick = function (){
// setInterval(): 10밀리초 마다 startTimer()를 호출 시켜주는 메서드
interval = setInterval(startTimer,10)
}
// stop button click function
buttonStop.onclick = function (){
// clearInterval(): setInterval() 반복 취소 메서드
clearInterval(interval);
}
// reset button click function
buttonReset.onclick = function(){
clearInterval(interval);
// 변수 초기화
seconds = 0;
tens = 0;
// HTML view 초기화
appendSeconds.innerText = 0;
appendTens.innerText = 0;
}
// startTimer function
// 시간이 증가함에 따라 변수와 view를 변경시켜 주는 메서드
function startTimer(){
// tens 증가
tens++;
// tens가 99 이상일 경우 -> 0:99 -> 1:00으로 변경되어야 한다.
if(tens > 99){
// seconds 1 올리기
seconds++;
// appendSeconds에도 반영하기
appendSeconds.innerText = seconds;
// appendTens 초기화
tens = 0;
appendTens.innerText = tens;
}
// tens가 99 이하일 경우 -> 0:01 -> 0:02으로 변경되어야 한다.
else {
appendTens.innerText = tens;
}
}
반응형
'Frontend > JavaScript' 카테고리의 다른 글
| [JS] Promise 동작 방식 : 아주 쉽게 그림으로 정리 (1) | 2024.10.21 |
|---|---|
| [JS] Uncaught SyntaxError: Cannot use import statement outside a module 에러 해결 방법 (0) | 2024.07.10 |
댓글