“我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!”
前言
今天看网站发现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);
这样就完成了,我们一起看一下最后的效果吧