Day2-鐘錶指針

CSS

文檔：http://www.ayqy.net/doc/css2-1/cover.html#minitoc

1. min-height：100vh

2. background-size：cover
   background-size中，100%和cover都是用於將圖片擴大或者縮放來適應整個容器，前者按容器比例撐滿，圖片可能會變形，但是會展示出完整圖片；後者把背景圖片放大到適合元素容器的尺寸，圖片比例不變，但是超出容器的部分可能會被裁掉導致圖片不完整

3. transition，補間動畫
   transform，2/3D變換

.box{
	transition-property：all;
	transition-duration：2s;
	transition-delay: 1s;
  // 寫成集合
    transition: 讓哪些屬性進行過度 過渡的持續時間 運動曲線 延遲時間;
  }
.box:hover{
	transform：scale(1.5,0.5);
	transform: translate(-50%, -50%); //參數爲百分比，相對於自身移動
	
	//鐘錶指針旋轉效果
	transform: rotate(45deg); //正值 順時針；負值：逆時針 
	transform-origin: center bottom;   //旋轉時，以盒子底部的中心爲座標原點
}

JS

獲取時間
如果沒有輸入任何參數，則Date的構造器會依據系統設置的當前時間來創建一個Date對象。
注意：代表月份的整數值從0（1月）到11（12月）

var now = new Date();

// alue代表自1970年1月1日00:00:00 (世界標準時間) 起經過的毫秒數
var oneday = new Date(1453094034000); 

var birthday = new Date(1995, 11, 17);
// Sun Dec 17 1995 00:00:00 GMT+0800 (中國標準時間) {}

Date.now() === now.getTime()
// 1554900548032

now.getDate()
根據本地時間返回指定日期對象的月份中的第幾天（1-31）

now.getFullYear()
根據本地時間返回指定日期對象的年份（四位數年份時返回四位數字） 

now.getMonth()
根據本地時間返回指定日期對象的月份（0-11） 

now.getDay()
根據本地時間返回指定日期對象的星期中的第幾天（0-6） 

now.getHours()
根據本地時間返回指定日期對象的小時（0-23） 

now.getMinutes()
根據本地時間返回指定日期對象的分鐘（0-59） 

now.getSeconds()
根據本地時間返回指定日期對象的秒數（0-59） 

setInterval

let intervalID = window.setInterval(func, delay[, param1, param2, ...]);

* intervalID 是此重複操作的唯一辨識符，可以作爲參數傳給clearInterval() 
* func 是你想要重複調用的函數 
* delay 是每次延遲的毫秒數 (一秒等於1000毫秒)，函數的每次調用會在該延遲之後發生 
* 和setTimeout一樣，實際的延遲時間可能會稍長一點 

clearInterval(intervalID);

demo

配合animate.css實現：https://cssanimation.rocks/clocks/