Javascript is required

May 10, 2019

【JavaScript】JS地下城-2F-時鐘

【JavaScript】JS地下城-2F-時鐘

2F-時鐘

wp-image-201

連結

Demo

Code

使用語言

HTML、CSS、JavaScript

BOSS 弱點

  1. 【特定技術】需使用 JS 原生語法的getDate()撈取時間，不可用套件
  2. 【特定技術】需使用 JS 原生語法的setTimeout() 或setInterval()，持續讓秒針、分針、時針能夠以台北時區移動
  3. 【特定技術】介面請全部用 CSS2、CSS3 手寫繪製，什麼…？你說太強人所難？？那..用圖片也不是不行辣，
    點選一下元素，右側控制列會有個藍色按鈕，點選 下載 即可。

技巧

/*父元素*/
.clock{
  position: relative;
}
/*以秒針舉例*/
.sec{
  /*修改svg檔案的高度為100%後，在CSS自定高度*/
  height: 126px;
  width: 12px;
  position: absolute;
  /*設定重疊順序，數字越高越上面*/
  z-index: 1;
  /*設定相對於父元素的高度位移*/
  top: 49.9%;
  transform: rotate(0deg);
  /*把背景設為100%讓高度與寬度決定大小*/
  background-size: 100% 100%;
  background-image: url(../images/second-hand.svg);
  /*設定旋轉中心點*/
  transform-origin: center 0.5px;
}

輔助對齊方法

.line{
  height: 1px;
  width: 100%;
  transform: rotate(90deg);
  background: #ffffff;
  position: absolute;
  top:246.5px;
}

畫一條白線調整高度到時鐘中心點輔助對齊其餘指針

JS講解

function time() {
  // 取得時間
  const time = new Date()
  const hour = time.getHours()
  const min = time.getMinutes()
  const sec = time.getSeconds()
  // 將時間套用到CSS角度
  // 減去預設圖片角度，讓角度回到12點鐘位置
  document.querySelector('.hour').style.transform = `rotate(${
     hour * 30 + min / 2 - 90}deg)`
  document.querySelector('.min').style.transform = `rotate(${
     min * 6 + sec / 10}deg)`
  document.querySelector('.sec').style.transform = `rotate(${sec * 6 + 180
     }deg)`
}
// 設定每秒執行
setInterval(time, 1000)

參考資料

CSSのposition:absolute;とは？要素を思いのままに配置する方法

CSS沒有極限
– CSS transform-origin

Tags
cd ..