深入淺出 Javascript30 快速導覽：Day 2：CSS + JS Clock

做了两天了，简单的谈一下感受，这个项目虽然推出了好几年了（2016），前端圈发生了天翻地覆的变化，随着三大框架的流行， jQuery和原生JS 开发在国内逐渐失去主流地位，但是万变不离其宗。原生JS至关重要。因为JS是这一切的基础，就像高楼大厦的地基一样，你总不能直接就开始四楼五楼吧，那是不现实的。

简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 2 篇。完整指南在 GitHub，喜欢请 Star 哦♪(^∇*)

实现效果

[图片上传失败...(image-5d82d1-1632934898764)]

文档中已经给出了 HTML 结构，表盘内有三个 div 对应三个指针。只需要添加一些 CSS 效果，然后用 JavaScript 动态更新指针的状态即可

关键要点

表盘上指针的样式：旋转的效果
获取实时的时间
每一秒改变一次指针状态

涉及到的特性：

transform: rotate()
transition
setInterval(callback, time)
setTimeout
new Date()
Date().getSeconds()
Date().getMinutes()
Date().getHours()
Window.requestAnimationFrame()

过程指南

CSS 部分

在原作者的基础上稍稍改进了一下增加了三个伪元素指针旋转轴与表盘中心重合

 .second-hand::after {
            position: absolute;
            content: '';
            display: block;
            width: 5px;
            height: 50%;
            background-color: red;
            left: 50%;
            bottom: 50%;
            transform: translate(-50%, 0);
        }
        
        .min-hand::after {
            position: absolute;
            content: '';
            display: block;
            width: 10px;
            height: 40%;
            background-color: white;
            left: 50%;
            bottom: 50%;
            transform: translate(-50%, 0);
        }
        
        .hour-hand::after {
            position: absolute;
            content: '';
            display: block;
            width: 15px;
            height: 20%;
            background-color: white;
            left: 50%;
            bottom: 50%;
            transform: translate(-50%, 0);
        }

用伪元素增加一个表盘的中心点

 .clock-face:after {
            content: '';
            display: block;
            width: 30px;
            height: 30px;
            border-radius: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
        }

JS部分

利用定时器自动更新时间有三种方式实现这种方法
- 定时器 setInterval 可以每隔一段固定的时间将操作放入执行队列，利用这个特性，加入页面后每秒更新一次时间，以实现秒针转动的效果。
```
 setInterval(setDate, 1000);
 // setDate 为每 1000 毫秒触发的 function
```
- 定时器 setTimeout 设定延时执行一次配合回调函数形式，加入页面后每秒更新一次时间，以实现秒针转动的效果。

function timeoutHandler() {
                setClock(); //执行 函数 
                setTimeout(timeoutHandler, 1000)
            }
 setTimeout(timeoutHandler, 1000)

Window.requestAnimationFrame()方法

function animationHandler() {
                setClock();
                window.requestAnimationFrame(animationHandler)
            }
  window.requestAnimationFrame(animationHandler)

获取三个指针对应的 HTML 元素，留待后续操作

            const second = document.querySelector('.second-hand'); //秒针 
            const min = document.querySelector('.min-hand'); //分表 
            const hour = document.querySelector('.hour-hand'); //时针

编写 setClock 方法
1. 创建 Date 对象
2. 获取当前时间的小时、分钟、秒
3. 利用此刻的数据，计算每个指针对应的角度
```
let secondDeg = data.getSeconds() * 6 //(360/60)
```
  以秒针为例，由于此页面初始状态中秒针为垂直的，所以零点时（时间起始位置）应用到元素上的 rotate 旋转角度值应该为 6°。秒针转一圈为 60s，所以每一秒对应表盘上的角度值即为 (...s / 60s) 。
  
  Wes Bos 给出的解决方案中，时针是和秒针一样每一小时跳动一次，若要模拟更加真实的时钟，要使时针在一小时内缓慢的移动到下一个时间点。所以可以利用上分钟，计算每一分钟对时针的角度影响，将加到时针角度上即可。
```
let minDeg = data.getMinutes() * 6 + data.getSeconds() * 6 / 60 //(360/60)
        let hourDeg = data.getHours() * 30 + data.getMinutes() * 30 / 60 //(360/12)
```
4. 将角度值赋值给 HTML 元素的 style 中的 transform 属性

  //动态改变样式 表盘时针旋转的角度 
                second.style.transform = `rotate(${secondDeg}deg)`
                min.style.transform = `rotate(${minDeg}deg)`
                hour.style.transform = `rotate(${hourDeg}deg)`