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/