2-2. Stop watch와 Timer - 타이머 만들기

목차

2. Stop watch와 Timer - 스톱워치 만들기
2-2. Stop watch와 Timer - 타이머 만들기

 

발생한 문제점

• 타이머에서 index가 서로 공유되는 현상이 발생했다.

 

해결

• 하나의 index를 사용해 두 곳에 적용해 발생한 문제로, 각각 index를 따로 선언해주었다.

 

우선 스톱워치와 타이머를 오갈 수 있는 탭버튼 이벤트를 만들어주었다.

// tap 버튼 이벤트
const tapBtn = document.querySelectorAll('.tap')
const tapCont = document.querySelectorAll('.tapcon')

tapBtn.forEach((tapBtns)=> {
    tapBtns.addEventListener('click', (e)=> {
        let id = e.currentTarget.dataset.id
        if (id) {
            for (let btns of tapBtn) {
                btns.classList.remove('click-btn')
            }
            e.currentTarget.classList.add('click-btn')

            for (let conts of tapCont) {
                conts.classList.add('hidden')
            }
            let tapcont = document.getElementById(id)
            tapcont.classList.remove('hidden')
        }
    })
})

 

그 후 타이머는 초마다 분과 초가 각각 늘어나게 한 뒤, 두 시간을 합친 후 totalTime으로 만들어주었다.

// 시간 설정
const timerMinsBtn = document.querySelector('.timer-mins')
const timerSeconds = document.querySelector('.timer-seconds')
let mIndex = 1
let sIndex = 1

timerMinsBtn.addEventListener('click', (e) => {
    const left = document.querySelector('.timer-mins-left')
    const right = document.querySelector('.timer-mins-right')
    const view = document.querySelector('.timer-mins-view')

    if (e.target === right) {
        mIndex++
    } else if (e.target === left) {
        mIndex--
    }

    mIndex < 1 ? left.classList.add('hidden') : left.classList.remove('hidden')
    mIndex > 9 ? right.classList.add('hidden') : right.classList.remove('hidden')

    view.innerText = mIndex
})

timerSeconds.addEventListener('click', (e) => {
    const left = document.querySelector('.timer-seconds-left')
    const right = document.querySelector('.timer-seconds-right')
    const view = document.querySelector('.timer-seconds-view')

    if (e.target === right) {
        sIndex++
    } else if (e.target === left) {
        sIndex--
    }

    sIndex < 1 ? left.classList.add('hidden') : left.classList.remove('hidden')
    sIndex > 58 ? right.classList.add('hidden') : right.classList.remove('hidden')
   
    view.innerText = sIndex
})

// 타이머 시작 이벤트
const timerStart = document.querySelector('.timer-start')
const timerTime = document.querySelector('.timer-time')
const timerReset = document.querySelector('.timer-reset')
const timerEnd = document.querySelector('.timer-end')

let state = true
let timerInterval
let totalTime

timerStart.addEventListener('click', (e) => {
    totalTime = mIndex*60 + sIndex
    if (state === true) {
        timerInterval = setInterval(timer, 1000)
        timerStart.classList.add('active')
    }
})


// 시간 감소
function timer(e) {
    let mTimer = Math.floor(totalTime/60)
    let sTimer = totalTime%60
    totalTime--
    console.log(totalTime)

    if (totalTime < 0) {
        timerTime.classList.add('hidden')
        timerEnd.classList.remove('hidden')
        timerStart.classList.remove('active')
        clearInterval(timerInterval)
        state = false
    }

    timerTime.innerText = `${mTimer > 9 ? mTimer : '0' + mTimer}:${sTimer > 9 ? sTimer : '0' + sTimer}`
}


// 리셋 버튼
timerReset.addEventListener('click', (e)=> {
    clearInterval(timerInterval)
    state = true
    timerTime.innerText = '00:00'
    timerStart.classList.remove('active')
    timerTime.classList.remove('hidden')
    timerEnd.classList.add('hidden')

})