iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
自我挑戰組

JavaScript 30天 跟著一起做一遍!!!系列 第 28

Countdown Clock

[Day28] Countdown Clock

倒數計時器

let countdown;
const timerDisplat = document.querySelector('.display__time-left')

const endTime=document.querySelector('display__end-time')
const buttons = document.querySelectorAll('[data-time]')

function timer(seconds){
clearInterval(countdown)
const now = Date.now();
const then = now+ seconds* 1000;
countdown = setInterval(()=>{ 
    const secondsLeft = Math.round((then - Date.now()) / 1000)
    if(secondsLeft <=0 ){
    clearInterval(countdown)
    return;
}

},1000)
}
function dispaltTimeLeft(seconds){
const minutes = Math.floor(seconds/60);
const remainderSeconds = seconds % 60
}

const display=`${minutes}:${remainderSeconds <10 ?'0':''}${remainderSeconds}`

document.title=display
timeeDisplay.textContent=display

function displayEndTime(timestamp){

    const end=new.Date(timestamp);
    const hour = end.getHours();
    
    const adjustHour=hour>12?hour-12:hour
    const minutes = end.getMinutes();
    endTime.textContent=`be back at ${adjustedHour}:${minutes <10 ?'0':""}${minutes}`
}


function startTimer(){
const seconds = parseInt(this.dataset.time)
}

buttons.forEach(button =>
button.addEventListenter('click',startTimer)
)

document.customForm.addEventListener('submit',function(e){
e.perventDefault();
const mins = this.minutes.value
timer(mins*60);
this.reset()
})


上一篇
## [Day27] Video Speed Controller UI
下一篇
[Day29] Whack A Mole Game
系列文
JavaScript 30天 跟著一起做一遍!!!30

尚未有邦友留言

立即登入留言