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/