做一個漂亮甜美的時鐘,一開始就提供了一個鐘面,也寫好了三支指針
- 功能
- 顯示目前的時間
- 更新時針、分針、秒針
- 顯示目前的時間
- 畫面
- 讀得到目前的時間
- 秒針要有「真實的滴答」動作
- 追加規格
- 指針要有長短(或粗細)可以分辨彼此
- 解決最後的歸零問題
cssref: CSS3 transform Property
可以進行2D和3D的變化,屬性後面可以接幾種能使用的函數
1D變化(其實有些是2D適用, 有些是3D適用)
translateX(x)
平移translateY(y)
平移scaleX(x)
放大scaleY(y)
放大scaleZ(z)
放大rotateX(angle)
, 轉rotateY(angle)
, 轉rotateZ(angle)
, 轉skewX(angle)
, 歪斜skewY(angle)
, 歪斜
2D變化
matrix(n1,n2,n3,n4,x,y)
- n1~n4:歪斜(看起來像翻轉), 矩形變平行四邊形
- x,y: 平移
translate(x,y)
, 平移scale(x,y)
, 放大rotate(angle)
, 轉skew(x-angle,y-angle)
, 歪斜
3D變化
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
, 歪斜+平移ranslate3d(x,y,z)
, 平移scale3d(x,y,z)
, 放大rotate3d(x,y,z,angle)
, 轉perspective(n)
透視
在此用得到的
/*變化: 旋轉(7°);*/
transform: rotate(7deg);
cssref: CSS3 transition-timing-function Property
變化的函數,可以設成有回彈效果
可用函數(看參考資料了解比較快)
ease
linear
ease-in
類似cubic-bezier(0.42,0,1,1))
ease-out
類似cubic-bezier(0,0,0.58,1))
ease-in-out
類似cubic-bezier(0.42,0,0.58,1))
step-star
step-en
steps(int,start|end)
cubic-bezier(n,n,n,n)
, 貝玆函數 算是自訂變化曲線函數
transition-timing-function: 函數
setInterval(function, ms)
設定「持續執行」的function與間隔時間
秒針抖一下是因為角度歸零。
讓角度不歸零就可以避免。