今日文章目录

• 需求说明
• 事前准备
• 重点说明
• 参考资料

需求说明

• 输入框：使用者可以输入时间
• 显示：依据输入时间进行倒数
• 提示视窗：显示预计结束时间

事前准备

• 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()