자바스크립트를 이용해서 stopwatch 만들기

김민지·2024년 9월 21일

☁️ [‎kakao X goorm] DEEP DIVE | FE

목록 보기

4/15

설명

document.getElementId, .innerHTML 등 활용해보기

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>stopwatch</title>
</head>
<body>
    <div class="wrapper">
        <h1>Stopwatch</h1>
        <!--getElementById로 받으려면 class가 아닌 id로 설정해야함-->
        <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>

JS

// html 요소를 수정하기 위해서는, 우선 각 요소에 접근부터 해야함
// document.getElementsById(아이디) 사용해서 수정해야할 요소를 아이디로 받아오고, 
// const로 선언한 변수에 각각 저장하기

// 수정해야 하는 요소 목록: 
// 1. 1/10 초 나타내는 왼쪽에서 두번째 0을 둘러싼 span 요소
const appendTens = document.getElementById('tens');
// 2. 초 나타내는 왼쪽에서 첫번째 0을 둘러싼 span 요소
const appendSeconds = document.getElementById('seconds');
// 3. start, stop, reset 버튼
const buttonStart = document.getElementById('button-start');
const buttonStop = document.getElementById('button-stop');
const buttonReset = document.getElementById('button-reset');

let seconds = 0;
let tens = 0;
let interval;

// start 버튼 onclick 이벤트 설정: 누르면 시간이 흐르기 시작하도록!
buttonStart.onclick = function() {
    interval = setInterval(startTimer, 10)
    // setInterval(호출할 함수, 지연시간 ms) ← 1000ms = 1s, 10ms = 0.01s
    // 즉, startTimer 함수는 0.01초마다 한번씩 호출됨
    // setInterval의 함수호출을 멈추는 법? ▷ clearInterval
}

// stop 버튼 onclick 이벤트 설정: 누르면 멈추도록!
buttonStop.onclick = function() {
    clearInterval(interval); // setInterval 함수의 return값을 인자로 받음
    // 해당 버튼을 누른 시점부터 startTimer 함수의 호출을 중단함
}

// stop 버튼 onclick 이벤트 설정: 누르면 변수가 초기화되며 0:0 화면으로 돌아가도록!
// reset 버튼은 사실상 stop + reset임
buttonReset.onclick = function() {
    clearInterval(interval); // stop 파트 구현
    // reset 파트
    // 변수 초기화
    tens = 0;
    seconds = 0;
    // 화면 (innerHTML or innerText)도 0으로 초기화
    appendTens.innerHTML = 0;
    appendSeconds.innerHTML = 0;
}


function startTimer () {
    tens++; // tens는 0.01초마다 1씩 증가함
    // 즉, 0 ~ 99까지 증가하고, 1이 되려는 순간 1초(seconds)를 +1 해야함
    
    if (tens > 99) {
        // tens가 99 이상이 되려고 하면 더 증가시키는 대신 seconds를 하나 증가
        seconds++; 
        appendSeconds.innerHTML = seconds; // 화면에 반영
        tens = 0; // tens는 초기화해주기 (다음 초에서 또 0~99를 반복할 수 있도록)
        appendTens.innerHTML = tens; // tens를 0으로 초기화 후 00으로 표시
    } else {
        appendTens.innerHTML = tens; // 10~99일 때 그대로 표시
    }
    
}

김민지

이전 포스트

JavaScript 기초

다음 포스트

자바스크립트를 이용해서 stopwatch 만들기

☁️ [‎kakao X goorm] DEEP DIVE | FE

설명

HTML

JS

JavaScript 기초

[ 과제2 ] 자바스크립트를 이용해서 Todo 앱 만들기

0개의 댓글