Theme NexT works best with JavaScript enabled

ShunNien's Blog

不積跬步，無以致千里；不積小流，無以成江海。

0%

JS30紀錄 02-JS + CSS Clock

發表於 更新於 分類於 Disqus：

target fit
使用 JS 和 CSS 建立時鐘

Demo | Github

處理步驟

步驟 1. 建立 HTML

  • class clock 是圓時鐘容器
    div clock
  • class clock-face 是時鐘容納時針、分針、秒針的鐘面
    div clock-face
  • 建立三個 div 各自代表時針、分針、秒針

步驟 2. 調整時針、分針、秒針的 css

  • 設定三針旋轉的中心 transform-origin
  • 透過 transform 調整三針的位置， rotate(90deg); ，因為一開始是水平線，所以需要調整到 12 點鐘方向要加上 90 度
  • 設定三針走動的晃動特效 transition

步驟 3. 設定時間

  • 建立 setDate function
  • 透過 setInterval 每秒鐘執行 setDate

學習事項

時鐘的 JS 並無太多的運用，僅需要簡單的角度計算，所以這次學到的大都是 CSS 部分。

CSS 部分

transform-origin

transform 的起始點，一般來說變形的起始點都在物件的中心點，但如果需要像時鐘的分秒針一樣，中心點並不在物件的中心，就需要靠 transform-origin 去設定物件變形的起始點。

基準點是從左上開始，從水平開始往右稱為 x 軸，垂直往下稱為 y 軸， CSS 在編寫習慣上也是先寫 x 軸 再寫 y 軸，如 50px 100px

1
2
3
4
5
6
7
8
9
10
11
12
div
{
transform-origin:20% 40%;

-ms-transform-origin:20% 40%; 		/* IE 9 */

-webkit-transform-origin:20% 40%;	/* Safari 和 Chrome */

-moz-transform-origin:20% 40%;		/* Firefox */

-o-transform-origin:20% 40%;		/* Opera */
}

transform: rotate

變形的旋轉屬性。

1
2
3
.rotated {
  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
}

transition

transition 屬性是一個簡寫屬性，用於設置四個過渡屬性

  • transition-property 設置過渡效果的 CSS 屬性的名稱
  • transition-duration 定義動畫效果所花費的時間
  • transition-timing-function 設定動畫效果時所依據的貝茲曲線
  • transition-delay 定義多久之後開始發生動畫效果

transition-timing-function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* Keyword values */
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

/* Function values */
transition-timing-function: steps(4, end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
transition-timing-function: frames(10);

/* Multiple timing functions */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Global values */
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: unset;

延伸部分

  • 時分秒針，長度凸顯；
  • 添加數字

利用 CSS 調整，簡單使用 width 完成長度。
數字的部分，可以直接在 clock 放上背景圖片來快速處理。

extra part

參考資料

歡迎關注我的其它發布渠道