前言

最近有点偷懒，没有按照计划一个月更新一篇文章，所以这篇更新来啦

重点掌握

1. 绝对定位，圆的极坐标：绘制表盘的梳子
2. transition，rotate：绘制表盘的刻度和指针
3. 计时器（setInterval）：实现指针的旋转

页面绘制过程

页面容器绘制

1. 分针刻度的容器
2. 时针刻度的容器
3. 数字的容器
4. 指针的容器

初步绘制页面如下

  <div class="clock">
    <ul class="line-min"></ul>
    <ul class="line-hour"></ul>
    <ol class="number"></ol>
    <ul class="pointer">
      <li class="hour"></li>
      <li class="min"></li>
      <li class="sec"></li>
      <li class="circle"></li>
    </ul>
  </div>

首先给clock加样式，画一个表盘，给circle加样式，绘制出表盘中心的效果

.clock{
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: #9ed08545;
  margin: 50px auto;
}

接下来绘制表盘的刻度，先绘制一个1点钟的时针刻度

因为每个刻度角度不同，所以用JS动态生成表盘上的刻度

.line-hour li,
.line-min li {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: left center;
  background-color: #fff;
}
.line-hour li {
  width: 10px;
  height: 2px;
}
.line-min li {
  width: 5px;
  height: 2px;
}

 mounted() {
    this.drawLines('line-min', 60, 85);
    this.drawLines('line-hour', 12, 80);
  }

  /**
   * wrap：刻度线的父容器
   * total：刻度线的总个数
   * translateX：刻度线在X轴方向的偏移量
   */
  drawLines(className: any, total: number, translateX: number) {
    const gap = 360 / total;
    let strHtml = '';
    for (let i = 0; i < total; i++) {
      strHtml += `<li style="transform:rotate(${i * gap}deg) translate(${translateX}px,-50%);"></li>`;
    }
    const wrap = document.getElementsByClassName(className)[0];
    wrap.innerHTML = strHtml;
  }

接下来绘制表盘数字

.number {
  position: absolute;
  height: 150px;
  width: 150px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px;
  color: #fff;
}
.number li {
  position: absolute;
  transform: translate(-50%, -50%);
}

 /*
   * 绘制时钟数字
   * @param className 父容器的类名
   */
  drawNumbers(className: string) {
    const wrap = document.getElementsByClassName(className)[0];
    const radius = wrap.clientWidth / 2;

    let strHtml = '';
    for (let i = 1; i <= 12; i++) {
      const myAngle = ((i - 3) / 6) * Math.PI;

      const myX = radius + radius * Math.cos(myAngle); // x=r+rcos(θ)
      const myY = radius + radius * Math.sin(myAngle); // y=r+rsin(θ)
      strHtml += `<li style="left:${myX}px; top:${myY}px">${i}</li>`;
    }
    wrap.innerHTML = strHtml;
  }

接下来画表盘的指针

.pointer li.hour {
  width: 45px;
  height: 3px;
  margin-top: -1px;
}
.pointer li.min {
  width: 60px;
  height: 2px;
  margin-top: -1px;
}
.pointer li.sec {
  width: 90px;
  height: 1px;
  margin-top: -1px;
  background-color: red;
}

然后根据h小时m分钟s秒钟，时针、分针、秒针所走的夹角，计算出它们的位置，然后根据弄个循环定时器即可实现时钟的效果

  /*
   * 钟表走动，转动秒针、分针、时针
   */
  move() {
    const domHour = document.getElementsByClassName('hour')[0];
    const domMin = document.getElementsByClassName('min')[0];
    const domSec = document.getElementsByClassName('sec')[0];

    setInterval(function() {
      const now = new Date();
      const hour = now.getHours();
      const min = now.getMinutes();
      const sec = now.getSeconds();

      const secAngle = sec * 6 - 90; // s*6-90
      const minAngle = min * 6 + sec * 0.1 - 90; // m*6+s*0.1-90
      const hourAngle = hour * 30 + min * 0.5 - 90; // h*30+m*0.5 - 90
      domSec.setAttribute('style', `transform:rotate(${secAngle}deg)`);

      domMin.setAttribute('style', `transform:rotate(${minAngle}deg)`);
      domHour.setAttribute('style', `transform:rotate(${hourAngle}deg)`);

      document.title = `${hour}:${min}:${sec}`;
    }, 1000);
  }
}

最后实现效果图