Day29 Countdown Clock

第29天實作為建立一個倒數的時間顯示器。

首先建立倒數的時間計數器方法，在該方法中有觸發方法的時間now和停止時間then，並顯示剩餘秒數display(seconds)和截止時間點displayEndTimer(then)，在時間計數器中會隨著setInterval( function(), 1000)，每一秒顯示倒數的時間為截止時間點扣除目前時間，取得剩餘時間秒數const secondsLeft = Math.round((then - Date.now()) / 1000)，並顯示剩餘秒數。display(secondsLeft)。

function timer(seconds){
  clearInterval(countDown)

  const now = Date.now()
  const then = now + seconds * 1000 
  display(seconds)
  displayEndTimer(then)

  countDown = setInterval(()=>{
    const secondsLeft = Math.round((then - Date.now()) / 1000)
    if (secondsLeft < 0) {
      clearInterval(countDown)
      return
    }
    display(secondsLeft)
  }, 1000)
}

而當剩餘秒數為零，就解除時間函數clearInterval(countDown)，要不然該時間函數會一直執行下去。

下列方法為顯示剩餘秒數方法與即止時間點。

function display(seconds) {
  const minutes = Math.floor(seconds / 60)
  const reSeconds = seconds % 60
  const display = `${minutes}:${reSeconds < 10 ? '0' :''}${reSeconds}`
  timerDisplay.textContent = display
  document.title = display
}

function displayEndTimer(timer){
  const end = new Date(timer)
  const hour = end.getHours() > 12 ? end.getHours()-12 : end.getHours()
  const minutes = end.getMinutes() < 10 ? '0'+ end.getMinutes() : end.getMinutes()
  const mm = end.getHours() < 12 ? 'AM' : 'PM'
  endTimerDisplay.textContent = ` Be Back At ${hour}:${minutes}, ${mm}`
}

有兩種方式可以開啟時間倒數器，第一種為取得元素上的data-set的秒數，傳入時間倒數器中。即可以執行時間倒數。

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

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

第二種在表單中輸入秒數的方式來執行時間倒數器。

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

Html

<div class="timer">
  <div class="timer__controls">
    <button data-time="20" class="timer__button">20 Secs</button>
    <button data-time="300" class="timer__button">Work 5</button>
    <button data-time="900" class="timer__button">Quick 15</button>
    <button data-time="1200" class="timer__button">Snack 20</button>
    <button data-time="3600" class="timer__button">Lunch Break</button>
    <form name="customForm" id="custom">
      <input type="text" name="minutes" placeholder="Enter Minutes">
    </form>
  </div>
  <div class="display">
    <h1 class="display__time-left"></h1>
    <p class="display__end-time"></p>
  </div>
</div>

Javascript

1. Math.round()
   回傳四捨五入的數值

Math.round( 20.49); //  20
Math.round( 20.5);  //  21
Math.round( 42  );  //  42
Math.round(-20.5);  // -20
Math.round(-20.51); // -21

2. WindowOrWorkerGlobalScope.setInterval()
   時間計時器，每經過固定的時間間隔會連續呼叫函示，直到被取消為止。回傳值為代表的計時器。

var intervalID = window.setInterval(myCallback, 500);

function myCallback() {
  // Your code here
}

3. WindowOrWorkerGlobalScope.clearInterval()
   清除傳入參數的時間計時器。

scope.clearInterval(intervalID);

tags: Time