Day02 - JavaScript + CSS Clock

zzbo 发布于2019-08-20 18:07 / 2838人阅读

摘要：作者简介是推出的一个天挑战。完整指南在从零到壹全栈部落。通过时分秒对一圈度，进行映射，确定每一个指针所需旋转的角度。此前的代码中，每秒都会重新一个对象，用来计算角度值，但如果让这个角度值一直保持增长，也就不会出现逆时针回旋的问题了。

Day02 - JavaScript + CSS Clock

作者：©liyuechun
简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 2 篇。完整指南在从零到壹全栈部落。

简介

第二天的练习是用JS+CSS模拟时钟效果。

效果如下：

实现以上模拟时钟的效果，大致思路和解决方案如下：

分别获取到当前时间的时、分、秒。

通过时分秒对一圈360度，进行映射，确定每一个指针所需旋转的角度。

通过CSS的transform：rotate(deg)，来实时的调整指针在键盘中的位置。

页面布局

CSS样式

涉及到的特性：

transform-oragin

调整指针的初始位置以及旋转的轴点:transform-oragin

transform-oragin: 100%; //初始化使三个指针全部指向12时

transform: rotate()

设置旋转角度

transition

transition: all //0.05s;设置动画时间为0.05秒

transition-timing-function: cubic-bezier(x, x, x, x)

设置 transition-time-function 的值，以实现秒针“滴答滴答”的效果。此外注意 transform 中的 rotate （旋转）属性由角度来控制，可以试着在页面上修改这个参数来查看效果。

JS代码

获取秒针、分钟、小时节点

    const secondHand = document.querySelector(".second-hand");
    const minsHand = document.querySelector(".min-hand");
    const hourHand = document.querySelector(".hour-hand");

获取当前时间秒、分、小时

const now = new Date();
const seconds = now.getSeconds();
const mins = now.getMinutes();
const hour = now.getHours();

计算秒、分、小时角度

const secondsDegrees = ((seconds / 60) * 360) + 90;
const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6) + 90;
const hourDegrees = ((hour / 12) * 360) + ((mins / 60) * 30) + 90;

根据角度设置样式

secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;

设置定时器，每秒调用一次setDate函数

setInterval(setDate, 1000);

延伸思考

此处存在一个小瑕疵，当秒针旋转一圈之后回到初始位置，开始第二圈旋转，角度值的变化时 444° → 90° → 96° .... 这个过程中，指针会先逆时针从 444° 旋转至 90°，再继续我们期望的顺时针旋转，由于秒针变换时间只有 0.05s，所以呈现的效果就是秒针闪了一下，如果想要观察细节，可以将 .second 设为 transition: all 1s，效果如下所示：

要解决这个问题，目前找到了两种解决办法：

第一种

第二种

既然引发问题的是角度的大小变化，那就可以对这个值进行处理。此前的代码中，每秒都会重新 new 一个 Date 对象，用来计算角度值，但如果让这个角度值一直保持增长，也就不会出现逆时针回旋的问题了。

源码下载

Github Source Code

社群品牌：从零到壹全栈部落
定位：寻找共好，共同学习，持续输出全栈技术社群
业界荣誉：IT界的逻辑思维
文化：输出是最好的学习方式
官方公众号：全栈部落
社群发起人：春哥(从零到壹创始人，交流微信：liyc1215)
技术交流社区：全栈部落BBS
全栈部落完整系列教程：全栈部落完整电子书学习笔记

关注全栈部落官方公众号，每晚十点接收系列原创技术推送

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84095.html

JavaScript 30 - 一起做一次了不起的挑战

摘要：加入我们，一起挑战吧扫码申请加入全栈部落 JavaScript 30 - 一起做一次了不起的挑战 (Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班首期班(10.28号正式开班，欢迎抢座) 在Github上看到了wesbos的一个Javascript30天挑战的repo，旨在使用纯JS来进行练习，不允许使用任何其他的库和框架，该挑战共30天，我会在这里复现这30天遇到的挑...

1treeS 2019-08-20 18:11 评论0 收藏0
Java 时间与日期处理

摘要：时间与日期处理从属于笔者的现代开发系列文章，涉及到的引用资料声明在学习与实践资料索引中。可以通过静态构造方法很容易的创建，定义了与之间的转化关系时差类以年月日来表示日期差，而以秒与毫秒来表示时间差适用于处理与机器时间。 Java 时间与日期处理从属于笔者的现代 Java 开发系列文章，涉及到的引用资料声明在 Java 学习与实践资料索引中。 Java 时间与日期处理在 Java 8...

HelKyle 2019-08-15 10:59 评论0 收藏0
java 8 时间类之彻底看懂 java.time.temporal.ChronoField

摘要：欢迎关注我的项目，这篇博文只是完善时间工具类的测试过程。欢迎关注我的项目：https://github.com/duanluan/ZUtil，这篇博文只是完善时间...

lentrue 2021-11-22 09:34 评论0 收藏0
20 个案例教你在 Java 8 中如何处理日期和时间?

摘要：前言前面一篇文章写了如何安全的使用里面介绍了如何处理日期时间，以及如何保证线程安全，及其介绍了在中的处理时间日期默认就线程安全的类。引入了全新的日期时间格式工具，线程安全而且使用方便。前言前面一篇文章写了《SimpleDateFormat 如何安全的使用？》, 里面介绍了 SimpleDateFormat 如何处理日期／时间，以及如何保证线程安全，及其介绍了在 Java 8 中的处...

Rango 2019-08-19 10:32 评论0 收藏0
2-datetime 模块

摘要：时间转字符串在我们的使用中，我们常常需要将时间转换为字符串，用来作为文件的名字或者用于加密字符的输出等等。晚了个小时，所以要减去即是美国时间参考 datetime 时间转字符串在我们的使用中，我们常常需要将时间转换为字符串，用来作为文件的名字或者用于加密字符的输出等等。例子： from datetime import datetime datetime.strftime(datet...

LancerComet 2019-07-30 18:44 评论0 收藏0