iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 29
0
Modern Web

JavaScript 30實作心得筆記系列 第 29

Day29 Countdown Clock

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
  1. WindowOrWorkerGlobalScope.setInterval()
    時間計時器,每經過固定的時間間隔會連續呼叫函示,直到被取消為止。回傳值為代表的計時器。
var intervalID = window.setInterval(myCallback, 500);

function myCallback() {
  // Your code here
}
  1. WindowOrWorkerGlobalScope.clearInterval()
    清除傳入參數的時間計時器。
scope.clearInterval(intervalID);
tags: Time

上一篇
Day28 Video Speed Controller UI
下一篇
Day30 Whack A Mole Game
系列文
JavaScript 30實作心得筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言