02 JS实现时钟效果

最新推荐文章于 2024-08-27 13:24:20 发布

Sandy_Star

最新推荐文章于 2024-08-27 13:24:20 发布

阅读量1k

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48931875/article/details/123387811

版权

本文介绍了JavaScript30挑战的第2篇，讲解如何用JavaScript创建一个旋转的时钟效果，涉及指针旋转、获取当前时间及动态改变指针状态等步骤。通过动态修改CSS的rotate属性模拟时钟转动，并解决秒针旋转一周后的角度问题。

摘要由CSDN通过智能技术生成

02 JavaScript Clock 打卡指南

作者：@sandystar

简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 2 篇。完整代码已经放到github上了，欢迎访问！

实现效果

实现一个像日常时钟一样的旋转效果，获取当前的时间，显示当前的效果。

实现要点

怎样让指针进行旋转
怎样获取当前时间
怎样让每一秒都改变一次指针的状态

步骤分解

1. 让指针旋转

我们知道在css中如果要让某个盒子进行旋转，势必要用到 transform:rotate()，所以我们可以通过动态的修改每个指针的rotate的值来做到指针的动态旋转。

transition: all .05s;
transform-origin: 100%; /*让旋转的中心在中间*/
transition-timing-function: cubic-bezier(0.42,0,0,34,1,82); /*设置指针回弹式的效果，以实现秒针“滴答滴答”的效果*/
transform: rotate(90deg);  /*开始时让指针停在十二点整*/