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

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

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

实现效果

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

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

关键要点

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

涉及到的特性：

• 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部分

1. 利用定时器自动更新时间 有三种方式实现这种方法

   • 定时器 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)

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

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

3. 编写 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)`