Day02 – JavaScript + CSS Clock

作者：©liyuechun
简介：JavaScript30 是 Wes Bos 推出的一个 30 天应战。项目免费供应了 30 个视频教程、30 个应战的肇端文档和 30 个应战处置惩罚方案源代码。目标是协助人们用纯 JavaScript 来写东西，不借助框架和库，也不运用编译器和援用。如今你看到的是这系列指南的第 2 篇。完全指南在 从零到壹全栈部落。

简介

第二天的演习是用JS+CSS模仿时钟结果。

结果以下：

完成以上模仿时钟的结果，大抵思绪和处置惩罚方案以下：

• 离别猎取到当前时候的时、分、秒。

• 经由过程时分秒对一圈360度，举行映照，肯定每个指针所需扭转的角度。

• 经由过程CSS的transform：rotate(deg)，来及时的调解指针在键盘中的位置。

页面规划

  <div class="clock">
    <div class="clock-face">
      <div class="hand hour-hand"></div>
      <div class="hand min-hand"></div>
      <div class="hand second-hand"></div>
    </div>
  </div>

CSS款式

  <style>
    html {
      background: #018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
      background-size: cover;
      font-family: 'helvetica neue';
      text-align: center;
      font-size: 10px;
    }

    body {
      margin: 0;
      font-size: 2rem;
      display: flex;
      flex: 1;
      min-height: 100vh;
      align-items: center;
    }

    .clock {
      width: 30rem;
      height: 30rem;
      border: 20px solid white;
      border-radius: 50%;
      margin: 50px auto;
      position: relative;
      padding: 2rem;
      box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1),
      inset 0 0 0 3px #EFEFEF,
      inset 0 0 10px black,
      0 0 10px rgba(0, 0, 0, 0.2);
    }

    .clock-face {
      position: relative;
      width: 100%;
      height: 100%;
      transform: translateY(-3px);
      /* account for the height of the clock hands */
    }

    .hand {
      width: 50%;
      height: 6px;
      background: black;
      position: absolute;
      top: 50%;
      transform-origin: 100%;
      transform: rotate(90deg);
      transition: all 0.05s;
      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
    }
  </style>

涉及到的特征：

• transform-oragin

调解指针的初始位置以及扭转的轴点:transform-oragin

transform-oragin: 100%; //初始化使三个指针悉数指向12时

• transform: rotate()

设置扭转角度

• transition

transition: all //0.05s;设置动画时候为0.05秒

• transition-timing-function: cubic-bezier(x, x, x, x)

设置 transition-time-function 的值，以完成秒针“滴答滴答”的结果。另外注重 transform 中的 rotate （扭转）属性由角度来掌握，能够试着在页面上修正这个参数来检察结果。

JS代码

  <script>
    const secondHand = document.querySelector('.second-hand');
    const minsHand = document.querySelector('.min-hand');
    const hourHand = document.querySelector('.hour-hand');

    function setDate() {
      const now = new Date();

      const seconds = now.getSeconds();
      const secondsDegrees = ((seconds / 60) * 360) + 90;
      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

      const mins = now.getMinutes();
      const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6) + 90;
      minsHand.style.transform = `rotate(${minsDegrees}deg)`;

      const hour = now.getHours();
      const hourDegrees = ((hour / 12) * 360) + ((mins / 60) * 30) + 90;
      hourHand.style.transform = `rotate(${hourDegrees}deg)`;
    }

    setInterval(setDate, 1000);

    setDate();
  </script>

• 猎取秒针、分钟、小时节点

    const secondHand = document.querySelector('.second-hand');
    const minsHand = document.querySelector('.min-hand');
    const hourHand = document.querySelector('.hour-hand');

• 猎取当前时候秒、分、小时

const now = new Date();
const seconds = now.getSeconds();
const mins = now.getMinutes();
const hour = now.getHours();

• 盘算秒、分、小时角度

const secondsDegrees = ((seconds / 60) * 360) + 90;
const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6) + 90;
const hourDegrees = ((hour / 12) * 360) + ((mins / 60) * 30) + 90;

• 依据角度设置款式

secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;

• 设置定时器，每秒挪用一次setDate函数

setInterval(setDate, 1000);

延长思索

此处存在一个小瑕疵，当秒针扭转一圈以后回到初始位置，最先第二圈扭转，角度值的变化时 444° → 90° → 96° …. 这个过程当中，指针会先逆时针从 444° 扭转至 90°，再继承我们希冀的顺时针扭转，因为秒针变更时候只要 0.05s，所以显现的结果就是秒针闪了一下，假如想要视察细节，能够将 .second 设为 transition: all 1s，结果以下所示：

要处置惩罚这个题目，现在找到了两种处置惩罚办法：

• 第一种

  <script>
    const secHand = document.querySelector('.second-hand');
    const minHand = document.querySelector('.min-hand');
    const hourHand = document.querySelector('.hour-hand');

    function setDate() {
      const date = new Date();

      const second = date.getSeconds();
      const secondDeg = (90 + (second / 60) * 360);

      const min = date.getMinutes();
      const minDeg = (90 + (min / 60) * 360);

      const hour = date.getHours();
      const hourDeg = (90 + (hour / 12) * 360 + (min / 12 / 60) * 360); // 到场分钟所占的时候，使时针能够缓慢地挪动


      //处置惩罚指针跳顿题目【第一种方法】
      //在发作跳顿的角度值处，将 CSS 的 `transition` 属性去掉
      if (secondDeg === 90) {
        secHand.style.transition = 'all 0s';
      } else {
        secHand.style.transition = 'all 0.05s';
      }

      if (minDeg === 90) {
        minHand.style.transition = 'all 0s';
      } else {
        minHand.style.transition = 'all 0.1s';
      }


      secHand.style.transform = `rotate(${ secondDeg }deg)`;
      minHand.style.transform = `rotate(${ minDeg }deg)`;
      hourHand.style.transform = `rotate(${ hourDeg }deg)`;

    }

    setInterval(setDate, 1000);

    setDate();
  </script>

• 第二种

  <script>
    const secondHand = document.querySelector('.second-hand');
    const minsHand = document.querySelector('.min-hand');
    const hourHand = document.querySelector('.hour-hand');

    let secondDeg = 0;
    let minDeg = 0;
    let hourDeg = 0;

    function initDate() {
      const date = new Date();
      const second = date.getSeconds();
      secondDeg = 90 + (second / 60) * 360;
      const min = date.getMinutes();
      minDeg = 90 + (min / 60) * 360 + ((second / 60) / 60) * 360;
      const hour = date.getHours();
      hourDeg = 90 + (hour / 12) * 360 + ((min / 60) / 12) * 360 + (((second / 60) / 60) / 12) * 360;
    }

    function updateDate() {
      secondDeg += (1 / 60) * 360;
      minDeg += ((1 / 60) / 60) * 360;
      hourDeg += (((1 / 60) / 60) / 12);

      secondHand.style.transform = `rotate(${ secondDeg }deg)`;
      minsHand.style.transform = `rotate(${ minDeg }deg)`;
      hourHand.style.transform = `rotate(${ hourDeg }deg)`;
    }

    initDate();
    setInterval(updateDate, 1000);
  </script>

既然激发题目的是角度的大小变化，那就能够对这个值举行处置惩罚。此前的代码中，每秒都邑从新 new 一个 Date 对象，用来盘算角度值，但假如让这个角度值一向坚持增进，也就不会涌现逆时针盘旋的题目了。

源码下载

Github Source Code

社群品牌：从零到壹全栈部落
定位：寻觅共好，配合进修，延续输出全栈手艺社群
业界声誉：IT界的逻辑思维
文明：输出是最好的进修体式格局
官方民众号：全栈部落
社群发起人：春哥(从零到壹创始人，交换微信：liyc1215)
手艺交换社区：全栈部落BBS
全栈部落完全系列教程：全栈部落完全电子书进修笔记

关注全栈部落官方民众号，每晚十点吸收系列原创手艺推送