JavaScript实现仿Clock ISO时钟

来源：懂视网责编：小采时间：2020-11-27 22:12:15

JavaScript实现仿Clock ISO时钟

JavaScript实现仿Clock ISO时钟:来模仿一个 ISO 上的时钟：ISO Clock 实现效果： ISO Clock 项目分析 1、首先时钟嘛，肯定要获取本地客户端的时间； 2、时钟有 3 个指针，我们可以通过添加动画的方式让它们围绕中心点转动； 3、通过获取到的 hour、minute 和 second 值分别

推荐度：

点击下载本文 文档为doc格式

导读JavaScript实现仿Clock ISO时钟:来模仿一个 ISO 上的时钟：ISO Clock 实现效果： ISO Clock 项目分析 1、首先时钟嘛，肯定要获取本地客户端的时间； 2、时钟有 3 个指针，我们可以通过添加动画的方式让它们围绕中心点转动； 3、通过获取到的 hour、minute 和 second 值分别

更像真实的 Clock

现实中的 Clock 大部分是秒针和分针都是会跳动的，并且伴随着滴答声，我们来尝试一下。

.hours-container {  animation: rotate 60s infinite linear;
}.minutes-container {  animation: rotate 3600s infinite steps(60);
}.seconds-container {  animation: rotate 60s infinite steps(60);
}

1、只需要将分针和秒针的旋转方式调整为 steps() 即可。

但是这样的 Clock 每次刷新都是从 0 开始的，并不是我们需要的，怎么做一个显示真实时间的呢？？

正确的时间

我们首先要获取到当前的时间，然后计算每个指针应该旋转的角度即可。

获取每个指针

const hourHand = document.querySelector('.hours-container');const minuteHand = document.querySelector('.minutes-container');const secondHand = document.querySelector('.seconds-container');

获取当前时间

const now = new Date();const hour = now.getHours();const minute = now.getMinutes();const second = now.getSeconds();
`

计算每个指针应旋转的角度

在 CSS3 中角度单位一共有四种：

deg (度，一个圆 360 度)、

grad（梯度，一个圆共400梯度）、

turn （转、圈，一个圆共1圈）、

rad （弧度，一个圆共2π弧度）

它们的对应关系为：

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

很显然，我们这里要用到的单位是 deg 。

const secondDegree = second * 6 + 90;
const minuteDegree = minute * 6 + (second / 10) + 90;
const hourDegree = (hour * 30) + (minute / 2) + 90;

1、+90 是因为角度的起始位置为水平的 X 轴，为了和 Clock 指针起始位置（Y 轴）做统一；

2、秒针的计算最简单，(second / 60) * 360 + 90;

3、分针要考虑秒针的影响，如过了30秒，相当于半分钟。公式为：当前分钟数 + 秒数在分钟的映射；即：(( minutes/ 60) * 360) + ((seconds / 60) * 6) + 90;

4、时针稍微复杂一点，因为要考虑分钟的影响，如过了30分钟，相当于半小时。公式为：当前时数 + 分钟在小时的映射。即：(( hours/ 12) * 360) + ((minutes / 60) * 30) + 90;

应用角度值

hourHand.style.transform = `rotateZ(${hourDegree}deg)`;
minuteHand.style.transform = `rotateZ(${minuteDegree}deg)`;
secondHand.style.transform = `rotateZ(${secondDegree}deg)`;

为了使页面能实时的更新，我们要把上面的这些东西封装为一个函数，然后用定时器每秒执行一次。

整个时钟的功能都完成了！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JavaScript实现仿Clock ISO时钟

推荐度：

点击下载本文 文档为doc格式

标签：实现 ISO 时钟

热门焦点

JavaScript实现仿Clock ISO时钟

JavaScript实现仿Clock ISO时钟

JavaScript实现仿Clock ISO时钟

最新推荐

猜你喜欢

热门推荐