第二堂 – JS and CSS Clock

 邏輯流程
本堂課需要完成的有

設定指針的style，包含旋轉軸、旋轉效果
取得時間
將時間換算成時針、分針及秒針的角度
課程重點
關於指針旋轉的CSS：

transform-origin：我們的指針是以一端點為軸來旋轉，若不設定transform-origin，其預設是50%，就會是以指針中點為軸旋轉。因此在此實作中需設定為100%。
transition：設定過場時間，即秒針轉到下一秒所需要的時間，可以配合transition-timing-function使用，會有更多特別的效果。
transition-timing-function：可設定過場的速度。在chrome裡面點選此屬性的小圖示，可顯示視覺化的函數(如下圖所示)，並可用滑鼠拖移其參數，函數中的X軸為過場時間，Y軸為過場動畫的位置。而在課程中老師將參數設定成像真實時鐘般，秒針有點機械回彈的感覺。這部份建議自行操作或是觀看上課影片，較能體會。

延伸閱讀
在此實作中，教材的完整版尚有些地方可以改進。例如原本教材的範例中，時針、分針和秒針都是一樣長度一樣顏色，無法分辨時間。而我們可以利用width、left、background-color等屬性改變指針的長短、顏色。另外有個需注意的是完整版在秒針回到0度時，過場效果會讓他從360度逆時針轉回0度，看起來有點詭異。而老師在課程最後也有提到，這個小bug有兩種解法：

在秒針回到0度時先暫時取消transition過場
讓角度持續累加，不要歸零。