JavaScript仿Clock ISO时钟

来模仿一个 ISO 上的时钟:ISO Clock

实现效果:

ISO Clock

项目分析

1、首先时钟嘛,肯定要获取本地客户端的时间;

2、时钟有 3 个指针,我们可以通过添加动画的方式让它们围绕中心点转动;

3、通过获取到的 hour、minute 和 second 值分别计算 时针、分针和秒针的角度值;

HTML&CSS

布局

1、 是为了布局的方便;

2、 然后每个指针都需要一个 容器 。

添加 CSS 样式

把背景加载进来,然后放在页面中合适的位置上。

1、 这个比例比较顺眼吧;

2、 使用Flex布局方式,并且使其中的 水中、垂直方向都居中。看过第一天教程应该都明白 Flex 布局的。

3、Clock 的背景使用一张图片。获取地址

添加中心轴

使用 CSS3 中的伪元素为时钟添加实心小圆点,指针都围着这个点转。

1、 这句 是必须的,不然这个伪元素不会显示,即使指定了宽度和高度。

2、 由于相对定位是从元素的左上角开始计算的,所以 不能使这个小圆点在 Clock 的中心,使用 向左上方移动自身宽度或高度的 50%

3、 是为了使这个小圆点在视图的最上层,遮挡住指针交叉的地方

指针容器

1、容器被放置在 Clock 的上方,但是并没有样式,接下来就可以创建指针了!

添加指针

1、分别添加时针、分针和秒针。

2、 使用 这种单位可以更好地适应不同的屏幕。

3、 规定指针旋转的位置为:X 方向的中心线 和 Y 方向的 90% 处这条线的交叉点。(具体看图吧)

4、 这里在定位的时候把自身的宽度计算在内了,所以就不必在往左上角移动了。

动画

目前为止,这个 Clock 还是没有功能的,我们来让它动起来。

定义动画规则

1、这里用 规则定义了一个动画,这个动画的名称是 ,应用这个动画的元素会沿着某个 Z 轴(也就是上面规定好的哪个交叉点)旋转 360 度。

定时功能

规定每个指针旋转 360 度需要多长时间。

为了演示方便,这里固定的时间并没有按照真实的 Clock 来设置。时针应该是 12 小时(43200s)、分针应该是 3600s 、秒针应该是 60s 。

更像真实的 Clock

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

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

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

正确的时间

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

获取每个指针

获取当前时间

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

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

(度,一个圆 360 度)、

(梯度,一个圆共400梯度)、

(转、圈,一个圆共1圈)、

(弧度,一个圆共2π弧度)

它们的对应关系为:

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

1、 是因为角度的起始位置为水平的 X 轴,为了和 Clock 指针起始位置(Y 轴)做统一;

2、秒针的计算最简单,

3、 分针要考虑秒针的影响,如过了30秒,相当于半分钟。公式为: ;即:

4、 时针稍微复杂一点,因为要考虑分钟的影响,如过了30分钟,相当于半小时。公式为: 。即:

应用角度值

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

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

项目地址:https://github.com/cwyaml/JavaScript-Programs

源自:http://www.jianshu.com/p/f3802bf2a20a

声明:文章著作权归作者所有,如有侵权,请联系小编删除。

感谢 · 转发欢迎大家留言

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181208B0Q7J500?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券