JS 30day Day2 JS and CSS Clock 筆記

demo

目的

學會 js Time 和 用js 操作css 還有基本的ES6語法

步驟

1. 利用css 製作 分針 時針 秒針
2. 取時間的函數 製作js 函數 setＤate 取出現在的時間

const now = new Date(); //
const seconds = now.getSeconds();
const mins = now.getMinutes();
const hour = now.getHours();

3.利用時間取得對應角度

const secondsDegrees = ((seconds / 60) * 360) + 90;

零點角度 rotate。秒針轉一圈 60s，每一秒對應角度為 (…s / 60s) * 360°。

4.用得到角度 給值html在style的transform屬性上

const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

5.放上js 計時器

 setInterval(setDate, 1000); //每一1000毫秒 觸發函式

挑戰

影片有提出 若指針在354度切到0度時， 會使指針往前彈回去，這是因為有使用transtion，在角度做切換時會加上的動畫效果， 354→0度會認為是往前，而非轉一圈回到起點，所以動畫先往前轉到0。 解法有：

• 修改transition 秒數
• 角度增加

css&js 補充

es6 基本

const 常數 不允許之後做改變 不允許重複宣告 不允許宣告前使用

let 變數

• let 禁止在同一活動範圍中再次宣告相同名稱的變數。var 會無視第二次宣告，只管指派變數值。但 let 視為重複宣告的語法錯誤。
• let 禁止在宣告變數之前就使用它。
• 在全域範圍以 let 宣告的變數，不會成為全域個體(global object)的屬性。但以 var 宣告的變數同時也會是全域個體的屬性。因此 let 變數是真正的區域變數，你用 module 或其他方式載入的程式碼看不到那些 let 變數。註: 在瀏覽器中運行的 JavaScript 之全域個體一律是 window 。

補充link

Template strings

secondHand.style.transform = `rotate(${secondsDegrees}deg)`;`

反括號裡面可以帶變數 補充link 補充link02

css transform

一個很複雜要常搞混的地方 transform-oragin 時鐘的軸點和軸心的初始位置 trsition :指針跳動時的轉場動畫

js 語法