文档章节

js实现的时钟

孟飞阳
 孟飞阳
发布于 2017/05/12 19:01
字数 1029
阅读 37
收藏 0

今天这个时钟效果图:

一程序员用javascript做了这个时钟特效,面试秒过

项目分析

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

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

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

HTML&CSS

布局

一程序员用javascript做了这个时钟特效,面试秒过

1、.box是为了布局的方便;

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

添加 CSS 样式

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

一程序员用javascript做了这个时钟特效,面试秒过

一程序员用javascript做了这个时钟特效,面试秒过

1、 width: 35rem; height: 38rem;这个比例比较顺眼吧;

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

添加中心轴

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

一程序员用javascript做了这个时钟特效,面试秒过

一程序员用javascript做了这个时钟特效,面试秒过

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

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

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

指针容器
一程序员用javascript做了这个时钟特效,面试秒过

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

添加指针
一程序员用javascript做了这个时钟特效,面试秒过
一程序员用javascript做了这个时钟特效,面试秒过

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

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

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

一程序员用javascript做了这个时钟特效,面试秒过

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

动画

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

定义动画规则
一程序员用javascript做了这个时钟特效,面试秒过

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

定时功能

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

一程序员用javascript做了这个时钟特效,面试秒过

一程序员用javascript做了这个时钟特效,面试秒过

一程序员用javascript做了这个时钟特效,面试秒过

更像真实的 Clock

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

一程序员用javascript做了这个时钟特效,面试秒过

一程序员用javascript做了这个时钟特效,面试秒过

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

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

正确的时间

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

获取每个指针

一程序员用javascript做了这个时钟特效,面试秒过

一程序员用javascript做了这个时钟特效,面试秒过

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

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

deg(度,一个圆 360 度)、

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

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

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

它们的对应关系为:

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

很显然,我们这里要用到的单位是 deg
一程序员用javascript做了这个时钟特效,面试秒过

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;

一程序员用javascript做了这个时钟特效,面试秒过

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

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

© 著作权归作者所有

孟飞阳
粉丝 214
博文 1018
码字总数 559543
作品 5
朝阳
个人站长
私信 提问
用CSS3制作50个超棒动画效果教程

CSS3为我们带来了令人惊叹的新特性,而最有趣的就是CSS动画。今天彬Go向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动...

鉴客
2010/08/12
7.5K
1
JavaScript牛刀小试,结合CSS3动画属性来做一个系统时间同步的时钟

JavaScript总算入门了,复杂的就先不来了,今儿牛刀小试,先来一个系统同步的时钟效果,只用到最简单的获取系统时间的函数。因为学习是需要正反馈的,否则总也看不到效果,难免失了深入下去的...

泱泱
01/30
0
0
请问下这个时钟是怎么做出来的。需要那些知识啊

高手帮忙指点下,这里面的时钟是如何实现的啊。http://www.44lan.cn/lan_browser/js/js_timing.aspx 具体需要那些的知识。到什么程度才能做出来。有源码就更好了....

peterA
2013/05/12
211
2
如何监测一个div的高度变化?

左右两栏,想让两栏的高度是时钟相等! 用户在页面上进行操作(无刷新),在其中一栏高度变化的时候另一栏也跟着变化,用js要怎么实现?

田小亮
2012/03/06
1K
2
JavaScript语言简介及简单实例

JavaScript语言是基于对象的(Object-Based),而不是面向对象的(object-oriented)。之所以说它是一门基于对象的语言,主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功...

icheer
2012/07/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Nginx提供下载apk服务

有时候我们可能需要提供文件或者其他apk下载链接,通过 nginx 配置可以很简单地实现。 server {    listen 80;    server_name download.xxx.com;    root app;    locati...

Jack088
12分钟前
0
0
系统监控-与应用高度耦合的Javamelody监控工具

1. 为什么不使用Javamelody? 与应用高度耦合,需要在项目中配置相关的配置文件和引入对应的依赖jar、能监控的功能有限,主要功能如下: 系统信息 可通过pdf下载监控信息 内存、CPU、磁盘、H...

秋日芒草
12分钟前
1
0
mysql基本语句

好久没用sql了,好多都忘记了,正好昨天做题碰上,今天就回顾一下吧! 0.题目如下(以下适用mysql来解答): 1.数据准备: 在notepad++(当然你可以通过其他方式来编写)中编写sql脚本如下: 2.通...

不最醉不龟归
21分钟前
0
0
前端程序员需要具备的几个软实力,你具备了吗

有很多关于前端程序员的调侃,比如“智商很高情商却很感人,思维缜密,极客,加班严重,没有对象只能new一个……”,虽然不是所有前端程序员都是这样,但这也说明了前端程序员这个群体中存在...

智云编程
22分钟前
0
0
Golang math基本数学函数

三角函数 正弦函数,反正弦函数,双曲正弦,反双曲正弦 func Sin(x float64) float64 func Asin(x float64) float64 func Sinh(x float64) float64 func Asinh(x float64) float64 一次性返回......

Sunki
54分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部