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 方法去获取当前时间,发现打印出来的是一个时间戳。所以不能这么搞。
|