功能描述和最终效果

一个模拟时钟，打开默认是本地时间。

长这样：

样式

结构是这样的

表盘
    刻度
    针
    中心点
数字时钟
复制代码

表盘：就是个圆

刻度：本来应该是有12个刻度的，但是太麻烦了， 只实现了最好定位的四个。

从第二个开始，角度是30度，位置可以通过三角函数求出但已经忘光了所以…手动定位吧

/* 以第一个为原点
   rotate = (i-1)*30 
   translate(x,y)
*/
/*3点*/
.clock-item:nth-child(4) {
  transform: rotate(90deg) translate(138px, -138px); /*150,-150*/
}
/*6点*/
.clock-item:nth-child(7) {
  transform: rotate(180deg) translate(-4px, -276px); /*0,-300*/
}
/*9点*/
.clock-item:nth-child(10) {
  transform: rotate(270deg) translate(-138px, -138px); /*-150,-150*/
}
复制代码

针：时针分针秒针，因为要记录时间的流逝需要旋转它们，所以别忘了指定旋转原点

.long {
  position: absolute;
  background-color: tomato;
  width: 8px;
  height: 80px;
  top: 50%;
  margin-top: -80px;
  left: 50%;
  margin-left: -4px;
  z-index: 3;
  transform-origin: bottom; /*默认是center*/
}
复制代码

功能

静止版

首先获取当前时间，然后计算角度，反应到时钟的针上。

根据时间获取角度

以秒针为例，秒针一分钟会转一圈。一分钟是60秒，一圈是360°，也就是一秒会转6°。同理，可以得出一分钟、一小时，分针和秒针移动的角度分别是6°和30°。但仔细想想，分针是会随着秒针的变化而缓慢移动的，一分钟是60秒，秒针移动六十次，分针移动一次，那么秒针移动一次，分针就应该移动六十分之一次才对。同理，可以得出分针和时针的角度：

秒针:6°
分针：6°+秒针的角度*0.1
时针：30°+分针的角度*0.5
复制代码

基于上面的公式，可以写出计算角度的函数calcRotate

function calcRotate(type, date) {
        const sec = date.getSeconds();
        const minute = date.getMinutes();
        const hour = date.getHours();
        if (type === "hour") {
          return hour * 30 + minute * 0.5;
        } else if (type === "min") {
          return minute * 6 + sec * 0.1;
        } else {
          return sec * 6;
        }
      }
复制代码

还有操作对应dom的函数changeDomRotate

function changeDomRotate(dom, deg) {
   dom.style.transform = `rotate(${deg}deg)`;
}
复制代码

所以，只需要获取当前时间，作为参数传入，就可以达到效果了

const now_date = new Date();
changeDomRotate(clock_hour, calcRotate("hour", now_date));
changeDomRotate(clock_min, calcRotate("min", now_date));
changeDomRotate(clock_sec, calcRotate("sec", now_date));
复制代码

效果是这样的：

非静止版

把最后四行代码放在setInterval中就行了

setInterval(() => {
        updateDate();
}, 1000);
复制代码

（如果碰到秒针从59->0的时候，指针反转一圈才回到对应位置，可以把过渡效果去掉）

代码

上传到这里了。