送给你女朋友一个苹果手表

905 阅读2分钟

“我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!

前言

今天看网站发现Apple Watch Series 5的时钟样式蛮好看,今天我们就实现一下

image.png

实现思路

制作个壳子

首先我们绘制一个色号为#043394的蓝色的边框,宽度是160,高度是240,比例是2:3,反正看起来像个手表就可以了

<div class="watch"></div>
 width: 160px;
  height: 240px;
  border: 4px solid #043394;
  background-color: #000;
  border-radius: 15px;

做个时钟样式

首先我们在clock里定义一些常用的变量包括时分秒的颜色和角度,方便以后调试,设置transform-origin了以便它们正确地围绕时钟的表面旋转。

.watch{
  width: 160px;
  height: 240px;
  border: 4px solid #043394;
  background-color: #000;
  border-radius: 15px;
}
.clock {
  --hour-hand-color: #fff;
  --hour-hand-degrees: 0deg;
  --minute-hand-color: #fff;
  --minute-hand-degrees: 0deg;
  --second-hand-color: #fff;
  --second-hand-degrees: 0deg;
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  margin: 40px auto;
}
.hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  height: 45%;
  width: 2px;
  margin-left: -2px;
  background: var(--second-hand-color);
  box-shadow:2px 2px 2px #0643a3,2px -2px 2px #0643a3,-2px 2px 2px #0643a3,-2px -2px 2px #0643a3;
  border-radius: 10px;
  transform-origin: bottom center;
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}

.second-hand {
  transform: rotate(var(--second-hand-degrees));
}

.hour-hand {
  height: 35%;
  border-radius: 40px;
  background-color: var(--hour-hand-color);
  transform: rotate(var(--hour-hand-degrees));
}

.minute-hand {
  height: 50%;
  background: var(--minute-hand-color);
  transform: rotate(var(--minute-hand-degrees));
}

效果是这样的

image.png

时钟添加js

首先,我们将时钟创建一个函数:

const clock = document.getElementById("clock");
function setDate() {
}
setDate();

在我们的函数内部,我们将使用Date()函数来获取当前时间来计算指针的角度

const now = new Date();
const secondsAngle = now.getSeconds() * 6; 
const minsAngle = now.getMinutes() * 6 + secondsAngle / 60;
const hourAngle = ((now.getHours() % 12) / 12) * 360 + minsAngle / 12;

以下是此计算的工作原理:

  • 秒: 我们用 60秒乘以6,恰好是360,一个完整圆中的完美角度数。
  • 分钟: 与秒相同,我们将先乘以6在加上除以60的以获得更准确的结果。
  • 小时: 首先,我们将小时除以12。然后我们再将该余数除以12得到一个值,在乘以360。例如,当我们在第 23 个小时时,23 / 12 = 余数是 11. 将其除以 12,我们得到0.916在乘以360. 在加上分钟角度除以12,以获得更准确的结果。

现在我们有了角度,剩下要做的就是通过在函数末尾添加以下内容来更新时钟的变量:

clock.style.setProperty("--second-hand-degrees", secondsAngle + "deg");
clock.style.setProperty("--minute-hand-degrees", minsAngle + "deg");
clock.style.setProperty("--hour-hand-degrees", hourAngle + "deg");

最后每隔一秒刷新一次

setInterval(setDate, 1000);

这样就完成了,我们一起看一下最后的效果吧