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

第二堂 – JS and CSS Clock

XAMPP下载 admin 1056浏览 0评论
 邏輯流程
本堂課需要完成的有

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

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

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

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

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

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