JavaScript30 Day 2

这是我在github 上发现的一个原生js挑战项目，由于是js小白，希望通过这次的项目加深对js的理解
第二天的挑战是运用js实现一个时钟,该时钟指针会随时间的变化而变化。
下面是实现后的效果图：

Day2效果图

原文档中给出了HTML结构，及部分css,我们需要补齐js代码和css代码

javascript部分

  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();

首先我们要用querySelector获取到三根指针，new Date()获取到当前的时间,再分别获取到hour，minute，second（tips：date里面获取月份的时候记得加一），再换算角度，由于刚开始的时候是只想9点钟方向的，所以角度要加90度。
setInterval()开启定时器，括号后面的数值单位为毫秒，取消定时器用clearInterval()即可

css部分

• transform-origin:调整指针的初始位置以及旋转的轴点
• transform:实现旋转的效果
• transition:调整时钟指针跳动时的过渡效果
• transition-timing-function:给指针增加回弹的效果，让他更像现实中的时钟

    transform-origin: 100%;
    transform: rotate(90deg);
    transition: all 0.05s;
    transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);

---

以上就是我在day2中学到的知识，这里我同样参考了soyaine的中文指南，感谢