最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

JS and CSS Clock

XAMPP下载 admin 538浏览 0评论

邏輯流程

本堂課需要完成的有

  1. 設定指針的style,包含旋轉軸、旋轉效果
  2. 取得時間
  3. 將時間換算成時針、分針及秒針的角度

課程重點

關於指針旋轉的CSS:

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

QQ截图20181119163027

延伸閱讀

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

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

转载请注明:XAMPP中文组官网 » JS and CSS Clock

您必须 登录 才能发表评论!