Stopwatch 만들기 (html, Javascript)

html과 javascript를 통해 제작한 스탑워치이다.

 

---

<h1 class="display">00:00</h1>
<button class="start">Start</button>
<button class="pause">Pause</button>
<button class="stop">Stop</button>
<button class="record">Record</button>
<div class="record_display"></div>
<script>
    const display = document.querySelector('.display')
    const startButton = document.querySelector('.start')
    const pauseButton = document.querySelector('.pause')
    const recordButton = document.querySelector('.record')
    const stopButton = document.querySelector('.stop')
    const record = document.querySelector('.record_display')

    let isRunning = false
    let isPause = false
    let time = 0
    let second = 0
    let milisecond = 0

    const timer = () => {
        if (!isRunning || isPause) return
        time = time + 1
        setTimeout(() => {
            let seconds = Math.floor(time / 100)
            let miliseconds = time % 100
            
            let firstZeroseconds = ''
            if (seconds < 10) {
                firstZeroseconds = "0"
            }

            let fisrtZeroMiliseconds = ''
            if (miliseconds < 10) {
                fisrtZeroMiliseconds = "0"
            }
            display.innerText = `${firstZeroseconds}${seconds}:${fisrtZeroMiliseconds}${miliseconds}`
            return timer()
        }, 10);
    }

    startButton.onclick = () => {
        if (!isPause) {
            time = 0
        }
        if (isRunning) return
        isRunning = true
        timer()
        return
    }

    pauseButton.onclick = () => {
        if (!isPause) {
            isPause = true
            pauseButton.innerText = 'Unpause'
            return
        } else if(isPause) {
            isPause = false
            pauseButton.innerText = 'Pause'
            timer()
            return
        }

    }
    stopButton.onclick = () => {
        isRunning = false
    }
    recordButton.onclick = () => {
        record.innerHTML = `<h1>${display.innerText}</h1>` + record.innerHTML
        return
    }
</script>

먼저 display와 각 버튼에 대한 설계를 한다.

start 버튼을 누르면 동작한다는 스위치 + 시간이 흘러가야한다.

이때 시간이 흐른다는 것을 표시하는 함수는 settimeout을 이용한다.

또한 settimeout에서는 1초를 1000ms로 이용한다는 것을 유념하여 코드를 작성한다.

정지를 누르거나, 스탑을 누를 경우, 꼬이지 않도록 각각 기능을 작성한다.

 

스탑워치를 만들때 주의해야할 사항은 timer()가 1개 이상 동시에 작동해서는 안된다는 것이다.

그렇게 될 경우 time변수가 동작되는 동작되는 timer()의 n배수만큼 빨리 증가하게 된다.

이는 스탑워치의 기능을 상실한다는 의미이다.