작동하는 스톱워치
Coddy의 스톱워치 - HTML/CSS/JS 프로젝트 코스 레슨 — 10개 중 9번째.
이제 작동하는 시작 및 중지 버튼이 생겼으니, 카운트를 시작할 차례입니다!
카운트를 하기 위해, setInterval이라는 JavaScript 함수를 사용할 것입니다:
const interval = setInterval(func, milliseconds)이 함수는 두 개의 인자를 받습니다: 함수와 밀리초를 나타내는 숫자입니다. 제공된 밀리초마다 해당 함수가 호출됩니다.
예를 들어 다음과 같습니다:
let count = 0
function updateCount() {
count += 1;
}
const interval = setInterval(updateCount, 1000)위의 예제에서는 1초마다 count 변수를 1씩 증가시킵니다.
인터벌을 중지하려면, setInterval의 반환 값과 함께 clearInterval을 사용하세요:
const interval = setInterval(updateCount, 1000)
clearInterval(interval)
챌린지
중급JS 파일에 다음 기능을 추가하세요:
- 시작/중지 버튼을 클릭하면 1초마다 스톱워치 텍스트를 1씩 업데이트하는 인터벌을 설정하세요. 형식이 올바르게 지정되었는지 확인하세요.
- 시작/중지 버튼을 다시 클릭하면 실행 중인 인터벌을 해제하세요.
코드에 setInterval을 추가한 후에는 웹 뷰에서 리셋 버튼을 클릭해야 합니다:
직접 해보기
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>