본문 바로가기
Frontend/JavaScript

[JS] 자바스크립트로 StopWatch(스톱 워치) 만들기

by 알기 쉬운 코딩 사전 2023. 10. 25.
반응형

HTML과 JavaScript로 만든 StopWatch 입니다.

JavaScript 코드의 경우 주석이 있는 코드와 주석으로 설명을 상세하게 작성한 코드 2개를 작성해두었습니다.

 

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;
let tens = 0;
let interval;

buttonStart.onclick = function (){
    interval = setInterval(startTimer,10)
}

buttonStop.onclick = function (){
    clearInterval(interval);
}

buttonReset.onclick = function(){
    clearInterval(interval);
    seconds = 0;
    tens = 0;

    appendSeconds.innerText = 0;
    appendTens.innerText = 0;
}

function startTimer(){
    tens++;

    if(tens > 99){
        seconds++;
        appendSeconds.innerText = seconds;
        tens = 0;
        appendTens.innerText = tens;
    }
    else {
        appendTens.innerText = tens;
    }
}

 

주석 포함

// 각 요소 변수에 저장하기
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

관련글

댓글

티스토리툴바