[六角學院] [攻略心得] JavaScript 新手 JS 地下城2F - 時鐘

來源：JavaScript 題目篇- 新手JS 地下城 | 六角學院

[前言]

這個題目跟第1關相反，重點在 JavaScript 上。

原本一開始看到這個題目的時候，我以為 JavaScript 的部份會很難，

要怎麼隨著時間變化讓指針轉動，我腦袋一片空白，

不過提示有說用 setTimeout() 或 setInterval()，所以就有想法了。

最後我花最多時間的地方居然是在讓時針、分針、秒針在旋轉後還能對準在正中央囧

[正文]

這個題目可以先拆成幾個步驟來攻略：

1. 排好時鐘、時針、分針、秒針
時針、分針、秒針要疊在時鐘上，
所以要用到「絕對定位、相對定位」的概念，
時鐘的 CSS 要下 position: relative;
時針、分針、秒針的 CSS 要下 position: absolute;

2. 要讓時針、分針、秒針照指定角度旋轉
CSS 語法：transform: rotate(180deg); (轉180度)
旋轉預設是以中心點旋轉的，
但時針、分針、秒針是以指針尾端為中心旋轉的，
因此要改變旋轉的基準點，可參考 transform-origin - MDN - Mozilla
還有一定要推薦卡斯伯老師寫的XD → CSS沒有極限 - CSS transform-origin
這邊我一開始先設定 transform-origin: right bottom; (以右下角為中心旋轉)
但有遇到問題，後面再詳細說明。

3. 每秒鐘取得現在時間
因為之後要讓時針、分針、秒針隨著現在時間旋轉到對應位置，
所以要先試 setInterval 的功能，
用 console.log 印出現在時間，
確定可以每秒鐘執行函數，
之後就好辦了。

setInterval(updateTime, 1000);
function updateTime(){
    let today = new Date();
    console.log(`now ${today}`);
}

提示寫著用 setTimeout() 或 setInterval()，
那為什麼我最後是用 setInterval()？

兩者的不同之處是 setTimeout() 只會執行一次就結束，
而 setInterval() 則是會在間隔固定的時間不斷重複。

可參考：談談 JavaScript 的 setTimeout 與 setInterval

上面的功能(零件)都有了再來就是組裝了。
先想一下時針、分針、秒針旋轉的邏輯，
這個大家應該都知道就不多說了XD

不過還是補一下，
前面有說到 CSS 旋轉的語法是：transform: rotate(180deg);
而用 JavaScript 設定 CSS 樣式的程式是：

// secondhandEl.style.transform = 'rotate(60)deg'
secondhandEl.style.transform = `rotate(${secondhandDegree}deg)`;

[遇到的問題]



我原本設定是 transform-origin: right bottom;  (以右下角為中心旋轉)
不過只要角度一轉動，
指針的位置就會偏離時鐘中心位置QQ














試了很多方法都沒用，
後來只好去看其他大大的程式了，
最後 tune 到最滿意的值是這樣：

CSS

.hour-hand{
        top: 48%;
        left: 50%;
        transform-origin: 0 50%;
    }
    .minute-hand{
        top: 50%;
        left: 50%;
        transform-origin: 50% 0;
    }
    .second-hand{
        top: 50%;
        left: 48%;
        transform-origin: 50% 0;
    }

參考的大大→ 好像就是這樓樓主的程式碼XD

大概看得懂，
就是位置排在 左上約50%位置，
時針以 X方向0 Y方向50% 的位置為中心點旋轉，
分針、秒針則以 X方向50% Y方向0 為中心點旋轉。

不過為什麼要這樣時針、分針、秒針旋轉後就不會偏離原來位置的原理我解釋不出來QQ
大大有說 好像是svg圖片xy方向不一樣，
所以有的是“50% 0 ” 有的是" 0 50%"，
總之我也先跟著這樣做了，
等到有時間再來細細研究~ 或者有路過的好心大大願意幫忙解釋也可以


[程式碼]

[Codepen] 新手 JS 地下城 2F - 時鐘


[後記]

然後在找其他大大的攻略時看到有大大純手刻!!!!!
太神啦!!!! 請受小的一拜!!!!!
有興趣手刻的請往這邊走XD → Ging - [JS地下城] 2F — 時鐘