JavaScript实现仿Clock ISO时钟


Posted in Javascript onJune 29, 2018

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

实现效果:

JavaScript实现仿Clock ISO时钟

ISO Clock

项目分析

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

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

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

HTML&CSS

布局

<div class="box">
 <article class="clock">
 <div class="hours-container">
  <div class="hours"></div>
 </div>
 <div class="minutes-container">
  <div class="minutes"></div>
 </div>
 <div class="seconds-container">
  <div class="seconds"></div>
 </div>
 </article>
</div>

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

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

添加 CSS 样式

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

html{  font-size: 10px;
}html,body{  margin: 0;  padding: 0;
}.box{ width: 35rem; height: 38rem;       background: rgb(205,205,205); border-radius: 1rem; margin: 5% auto; display: flex; justify-content: center; align-items: center;
}.clock{  width: 30rem;  height: 30rem;  background: #fff url(ios_clock.svg) no-repeat center;  background-size: 88%;  border-radius: 50%;  position: relative;
}

JavaScript实现仿Clock ISO时钟

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

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

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

添加中心轴

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

.clock:after{  content: '';  width: 1.5rem;  height: 1.5rem;  background: #000;  border-radius: 50%;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%,-50%);   /* 向左上移动自身的50% */
  z-index: 10;
}

JavaScript实现仿Clock ISO时钟

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

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

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

指针容器

.hours-container,.minutes-container,.seconds-container{  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;
}

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

添加指针

.hours {  width: 3%;  height: 20%;  background: #000;  transform-origin: 50% 100%;  position: absolute;  top: 30%;  left: 48.5%;
}.minutes {  width: 2%;  height: 37%;  background: #000;  transform-origin: 50% 100%;  position: absolute;  top: 13%;  left: 49%;
}.seconds {  width: 1%;  height: 40%;  background: #f00;  transform-origin: 50% 90%;  position: absolute;  top: 20%;  left: 49.5%;  z-index: 8;
}

JavaScript实现仿Clock ISO时钟

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

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

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

JavaScript实现仿Clock ISO时钟

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

动画

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

定义动画规则

@keyframes rotate {
  100% {    transform: rotateZ(360deg);
  }
}

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

定时功能

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

.hours-container {  animation: rotate 60s infinite linear;
}.minutes-container {  animation: rotate 30s infinite linear;
}.seconds-container {  animation: rotate 10s infinite linear;
}

JavaScript实现仿Clock ISO时钟

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

更像真实的 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);
}

JavaScript实现仿Clock ISO时钟

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)`;

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

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

Javascript 相关文章推荐
js TextArea的选中区域处理
Dec 28 Javascript
javascript修改图片src的方法
Jan 27 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
JavaScript ES 模块的使用
Nov 12 Javascript
vue ssr 指南详读
Jun 29 #Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 #jQuery
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 #Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 #Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
Jun 28 #Javascript
浅谈vue首屏加载优化
Jun 28 #Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 #jQuery
You might like
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
Javascript之文件操作
2007/03/07 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
Python如何重新加载模块
2020/07/29 Python
大学应届毕业生个人求职信
2013/09/23 职场文书
服务员岗位责任制
2014/02/11 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
助学金感谢信
2015/01/20 职场文书
车间主任岗位职责
2015/02/03 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
药品开票员岗位职责
2015/04/15 职场文书
关于环保的广播稿
2015/12/17 职场文书
JS中如何优雅的使用async await详解
2021/10/05 Javascript
nginx共享内存的机制详解
2022/03/21 Servers
vue的项目如何打包上线
2022/04/13 Vue.js
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL