[筆記]JavaScript30學習-Day2

2020.10.06

學習網站：javascript30

僅記錄JS及較複雜的CSS部分，若有不清楚或是歡迎留言討論，
謝謝(´｡• ω •｡`)

CSS + JS Clock

Step 1. 使用HTML和CSS建立Default時鐘圖案

• transform : rotate(90deg)預設旋轉圓心為該元素中心，若要調整原點，則需套用 transform-origin 效果
  ※ transform-origin: 100% 代表該元素 x軸 最右側
• transition效果讓時鐘指針移動更連續
  ※ 可於 chrome 檢查頁面新增並查看各種效果，也可細微調整嘗試不同呈現方式
  EX: transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1)

Step 2. 秒針JS

const secondHand = document.querySelector('.second-hand')
function setDate(){
    //console.log("hi");
    const now = new Date();//現在時間的數值
    const seconds = now.getSeconds();
    const secondsDegrees = ((seconds/60)*360);
    secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
    console.log(seconds);
}
setInterval(setDate,1000)

Step 3. 修正旋轉初始點(依呈現的結果而定)

• 因旋轉的初始點為左到右因此需再修正。

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

Step 4. 同上，製作分針及時針JS

Step 5. 優化時針及分針跳至下個時間的呈現動畫

Q: 由360度跳至0度時的動畫問題
A: 因為由最大度數跳至最小度數，導致transition動畫非往前，而是往後繞一圈到位子上

解決方法：

• 可讓度數繼續往上計算
• 在跳過去時移除transition，跳完再增加。