提姆寫程式

0%

JS 筆記 - 用 JavaScript 寫一個電子鐘

發表於 分類於 Disqus：
用原生 JS 取得日期與時間

this is clock

這次來練習透過 JS 原生的方式來取得日期與時間。

起手式

要先建構一個 Date 的物件才能取得當前時間。

1
2
let newDate = new Date();
console.log(newDate); //Thu Aug 06 2020 09:50:01 GMT+0800 (台北標準時間)

取得日期與時間的基本方式

Date 物件中包含了許多對日期時間處理方法，大致上可以分成以下幾類:
getter: 獲取某種時間格式，例如 getFullYear 是回傳西元年。
setter: 設定某種時間格式，例如 setFullYear 設定西元年。
格式化的 getter: 通常是要獲取不同地區的日期(或時間)格式，以及轉換成各種資料格式。

此次使用的方法

  • 這次要做一個電子鐘，要取得當前日期：年、月、日、時、分、秒。
  • 要讓秒數一秒跳一次。

依照官網的方法介紹，我先宣告一個 Date 的物件，並取用裡面的年、月、日、時、分、秒，並用 ES6 的寫法組成我要的格式，並渲染在網頁上。

month 這個地方比較奇怪，是從 0 開始，其他都從 1 開始。

1
2
3
4
5
6
7
8
9
let newDate = new Date();
let year = newDate.getFullYear();
let month = newDate.getMonth() + 1;
let days = newDate.getDate();
let hour = newDate.getHours();
let mins = newDate.getMinutes();
let sec = newDate.getSeconds();
let clockJSRead = `${year}/${month}/${days} ${hour}:${mins}:${sec}`;
date.textContent = clockJSRead;

看起來已經寫完了，也成功渲染在網頁上，但問題來了，這樣並不會一秒跳一次，呈現一個靜止的電子鐘…

既然有時間差會想到的就是 setTimeout 跟 setInterval，兩者不同的地方為：

  • setTimeout： 只會執行一次就結束。
  • setInterval：會在間隔固定的時間不斷重複。

更多可以參考談談 JavaScript 的 setTimeout 與 setInterval

既然要持續一秒跳一次，就要選擇 setInterval() 這個方法，並且給予 1000 毫秒，讓其 1 秒鐘更新一次。

1
2
3
4
5
6
7
8
9
10
11
12
13
let date = document.querySelector("#date");

setInterval(function () {
  let newDate = new Date();
  let year = newDate.getFullYear();
  let month = newDate.getMonth() + 1;
  let days = newDate.getDate();
  let hour = newDate.getHours();
  let mins = newDate.getMinutes();
  let sec = newDate.getSeconds();
  let clockJSRead = `${year}/${month}/${days} ${hour}:${mins}:${sec}`;
  date.textContent = clockJSRead;
}, 1000);

這樣就完成了，不過上方程式碼看起來很髒，所以這邊改寫成下方這樣：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let date = document.querySelector("#date");

function updateDate() {
  let newDate = new Date();
  let year = newDate.getFullYear();
  let month = newDate.getMonth() + 1;
  let days = newDate.getDate();
  let hour = newDate.getHours();
  let mins = newDate.getMinutes();
  let sec = newDate.getSeconds();
  let clockJSRead = `${year}/${month}/${days} ${hour}:${mins}:${sec}`;
  date.textContent = clockJSRead;
}
setInterval(updateDate, 1000);

CodePen: https://codepen.io/hnzxewqw/pen/KKzwVRO

參考資料