这是我在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的中文指南，感谢
