今日文章目錄

• 需求說明
• 事前準備
• 重點說明
• 參考資料

需求說明

• 輸入框：使用者可以輸入時間
• 顯示：依據輸入時間進行倒數
• 提示視窗：顯示預計結束時間

事前準備

• HTML 結構：

<section class="timer">
  <div class="countdownClock">
    <div class="form">
      <input type="number" placeholder="請輸入秒數" id="timerInput">
      <button class="addBtn">+</button>
    </div>
    <h1 class="countdownTitle">Counter</h1>
    <p class="comeBackTimeStemp">
        <!--    顯示預計回來的時間    -->
    </p>
  </div>
</section>

重點說明

• Date.now() : 回傳 距 1970/01/01 00:00:00 UTC 至今的毫秒數(數字型別)。

• setInterval(func, delayTime, argument)

  • 用途：每間隔多少毫秒，執行動作。
  • 回傳：timeoutID，紀錄當下定時編號，作為之後取消執行的依據。
  • 參數：
    • func:間隔delayTime，要執行哪些動作
    • delayTime : 延遲單位(毫秒)
    • argument(optional): 其他參數
  • 與setTimeout()差異：
    setTimeout()做完一次延遲執行動作即結束，setInterval()則是間隔延遲執行動作不中斷。

• clearInterval(timeoutID):

  • 用途：利用timeoutID中斷setInterval()。

• Math.round(value) : 回傳 四捨五入後的相近整數值。

      // 正數
      const num1 = 13.56;
      console.log(Math.round(num1)); // 14
  
      // 負數
      const num2 = -34.23;
      console.log(Math.round(num2)); // -34
  

• Math.floor(value) : 回傳 小於等於所給數字的最大整數。

      // 正數
      const num1 = 13.56;
      console.log(Math.floor(num1)); // 13
  
      // 負數
      const num2 = -34.23;
      console.log(Math.floor(num2)); // -35
  

• codepen 練習：https://codepen.io/chen-chens/pen/ZEyaBGB?editors=0010

• 顯示效果：
  

參考資料

• Javascript 30 - Day29
• 談談 JavaScript 的 setTimeout 與 setInterval
• MDN - Math.floor()
• MDN - Math.round()
• MDN - Date.now()