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 相关文章推荐
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
vue+AI智能机器人回复功能实现
Jul 16 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 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
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
js判断节假日实例代码
2017/12/27 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
python抓取网页图片示例(python爬虫)
2014/04/27 Python
在Python中使用成员运算符的示例
2015/05/13 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
Python中的日期时间处理详解
2016/11/17 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
Python基于execjs运行js过程解析
2020/11/27 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
市场营销专业毕业生自荐信
2013/11/02 职场文书
关于建议书的格式范文
2014/05/20 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
队列队形口号
2015/12/25 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
Python初学者必备的文件读写指南
2021/06/23 Python