用CSS和JS巧妙打造时钟效果

2024-01-16 06:48:30

沉浸在时间的河流中，我们见证着分秒流逝，编织出人生的华章。随着科技的蓬勃发展，我们拥有了超越传统时钟的更多方式来丈量时间。今天，我们将携手CSS和JS，踏上制作时钟的奇妙旅程。

CSS的妙笔丹青：绘制表盘

CSS，这门网页造型的艺术，将为我们的时钟绘制一幅优雅的蓝图。首先，我们用一个容器div创建一个圆形的时钟表盘：

#clock {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #eee;
}

表盘上那些均匀分布的刻度，可以用伪元素来巧妙地实现：

#clock::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  border: 1px solid black;
  border-radius: 50%;
}

#clock::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 240px;
  height: 240px;
  border: 1px solid black;
  border-radius: 50%;
}

JS的点睛之笔：驱动指针

JS，这门交互世界的魔法师，将赋予我们的时钟以灵动。首先，我们定义一些变量来存储时钟元素：

const clock = document.getElementById("clock");
const hourHand = document.getElementById("hour-hand");
const minuteHand = document.getElementById("minute-hand");
const secondHand = document.getElementById("second-hand");

接下来，我们使用setInterval函数，每秒更新一次时钟：

setInterval(() => {
  // 获取当前时间
  const date = new Date();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  // 计算指针的旋转角度
  const hourAngle = (hours % 12) * 30 + minutes / 2;
  const minuteAngle = minutes * 6;
  const secondAngle = seconds * 6;

  // 旋转指针
  hourHand.style.transform = `rotate(${hourAngle}deg)`;
  minuteHand.style.transform = `rotate(${minuteAngle}deg)`;
  secondHand.style.transform = `rotate(${secondAngle}deg)`;
}, 1000);