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

前端宋权武

2022年09月22日 21:29 · 阅读 246

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

前言

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

实现思路

制作个壳子

首先我们绘制一个色号为#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));
}
复制代码

效果是这样的

时钟添加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);
复制代码

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