JS30 02时钟

JS30 02时钟

时钟示例主要练习了对css中的旋转元素的操作，利用JavaScript对元素的样式进行控制并简单地操作了时间类。

CSS旋转变换

之前在工作中使用css主要是对transform使用平移translateX translateY传入值可以实现上下左右平移。而在这个示例中，需要对指针元素进行旋转操作使用rotate并向其中传入角度（单位为deg）。

css中关于角度的单位主要使用过deg，rad，turn。其中deg为角度，rad为弧度，turn为圈。

此时，旋转的中点为元素的中心，这并不符合钟表的规律，所以需要指定旋转的中点为端点，这个需要通过设置transform-origin。

在现实中，钟表指针转动不是突变的，而是连续的。所以需要定义过度的动画效果，需要对transition设置过渡时间，对transition-timing-function设置速度曲线，速度曲线可以通过chrome的控制台实现可视化调控。

JavaScript对元素样式调整

首先通过选择器选择dom元素，之后通过设置dom元素的style属性，来控制元素的样式。

时间类

在以往的工程中，直接引入了day.js来对时间进行格式化并进行一系列的操作，没有使用过JavaScript中原生的Date对象。

在此例中，需要获得相关的时分秒，这个可以通过new一个Date对象，之后调用其中的getSeconds 、getMinutes 、getHours方法，来获取相关数据。

在实例化Date对象的时候，我搞错了一个方法，直接调用Now方法去获取当前时间，发现打印出来的是一个时间戳。所以不能这么搞。