02 - JS and CSS Clock

展示 (opens new window)

內容概要

使用css製作時鐘指針,純js計算時間和轉動角度

重點整理

• 指針位置調整
• 各指針角度計算
• 計時器選用

指針位置調整

範例中的指針定位方式有稍微調整過

將各指針大小重新調整

.hand {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.05s ease-in-out;
}

各指針的使用::before製作

.second-hand::before{
  content: '';
  position: absolute;
  width: 5px;
  height: 50%;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%,0);
  background-color: white;
}

這樣調整的優點是在transform的中心點就是整個.hand的中心

也不用調整transform-origin的位置

各指針角度計算

簡單的數學題目 秒針和分針每走一格是 360/60=6(deg)

const now = new Date()

const second = now.getSeconds()
const secondDeg = second * 6

時針則是 360/12=30(deg)

const hour = now.getHours()
const hourDeg = hour * 30

計時器選用

範例使用setInterval (opens new window)

這裡使用requestAnimationFrame (opens new window)

個人對這兩個的差異分析如下

計時器名稱	說明	是否設定時間
setInterval	標準的計時器,設定固定時間重複調用function	是
requestAnimationFrame	根據使用者螢幕的更新頻率刷新,相當於不用設定時間的setTimeout	否

對我來說requestAnimationFrame是專門用於頁面刷新的計時器

而setInterval則使用於程式內的計時器

應用於程式內如下

function animationHandler() {
  setNowTime() //設定指針走動的function
  window.requestAnimationFrame(animationHandler)
}
window.requestAnimationFrame(animationHandler)