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);  /*开始时让指针停在十二点整*/

2. 获取当前时间

（1）使用定时器每秒执行一次函数，以便获取每一时刻的时间。

setInterval(setDate,1000);

（2）获取当前时间和小时、分钟和秒。（如果不知道怎么获取可以尝试打印时间的对象，从而找到对应的方法 console.log([now])）

const seconds = now.getSeconds();  //获取当前秒
const min = now.getMinutes();
const hour = now.getHours();

3. 改变指针的状态

（1）计算每个时刻指针所走过的角度。要模拟更真实的时钟

注：要实现像真正的时钟一样还要加上秒数或分钟数

const secondsDegrees = (seconds*6) + 90;  //秒针旋转的角度
const minsDegrees = (min*6) + ((seconds/60)*6) + 90; //秒针动的时候分针也会跟着动一点
const hourDegrees = (hour*30) + ((min/60)*30) + ((seconds/3600)*30) + 90;

（2）动态改变其transform

使用ES6里的模板变量

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

问题解决

2017-01-06 更新完善，感谢 @cody1991 提的 issue

这里有一个小瑕疵，当秒针旋转一周后回到初始位置，开始第二圈旋转，角度值的变化是 444° → 90° → 96°…这个过程中，指针会先逆时针从444°旋转至90°，再继续玩吗期望的顺时针旋转，由于秒钟变换只有0.05s，所以这个呈现的效果就是秒针闪现了一下。要解决这个问题，目前找到两种方法：

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

方法一

在这个特殊点将指针的 transition 属性去掉，由于距离短、时间短，将逆时针回旋的过程瞬间完成。

if (secondDeg === 90) secHand.style.transition = 'all 0s';
else secHand.style.transition = 'all 0.05s';if (minDeg === 90) minHand.style.transition = 'all 0s';
else minHand.style.transition = 'all 0.1s';

方法二

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

这是 @cody1991 提供的思路。只在页面第一次加载时 new 一次 Date 对象，此后每秒直接更新角度值。

let secondDeg = 0,
minDeg = 0,
hourDeg = 0;function initDate() {const date = new Date();const second = date.getSeconds();secondDeg = 90 + (second / 60) * 360;const min = date.getMinutes();minDeg = 90 + (min / 60) * 360 + ((second / 60) / 60) * 360;const hour = date.getHours();hourDeg = 90 + (hour / 12) * 360 + ((min / 60) / 12) * 360 + (((second / 60) / 60) / 12) * 360;
}function updateDate() {secondDeg += (1 / 60) * 360;minDeg += ((1 / 60) / 60) * 360;hourDeg += (((1 / 60) / 60) / 12);secHand.style.transform = `rotate(${ secondDeg}deg)`;minHand.style.transform = `rotate(${ minDeg }deg)`;hourHand.style.transform = `rotate(${ hourDeg }deg)`;
}initDate();
setInterval(updateDate, 1000);

问题解决。大功告成！

收获

setInterval的使用

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterv

动态的改变css样式

dom.style.属性 = 属性值
//例：hourHand.style.transform = `rotate(${hourDegrees}deg)`;

使用 transition 和transform 实现旋转效果

s样式

dom.style.属性 = 属性值
//例：hourHand.style.transform = `rotate(${hourDegrees}deg)`;

使用 transition 和transform 实现旋转效果

02 JS实现时钟效果相关推荐

前端js实现时钟效果
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>时 ...
使用js实现时钟效果
首先在单元格中输入下面的代码,然后使用html显示内容. <canvas id="view" height="300px" width="300 ...
基于canvas的原生JS时钟效果
概述运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...
js选中html的数字设置倒计时,JS实现的网页倒计时数字时钟效果
本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: 代码如下: javascript实现的倒计时时钟 body,div{margin:0;padding:0;} ...
圆盘时钟效果原生JS
圆盘时钟旋转时钟数字时钟写在前面仿荣耀手机时钟,设计的同款时钟效果实现效果实现原理数字时钟利用Date内置对象获取当下的时间,通过处理呈现在页面上这一步获取时间是非常简单的,通过Da ...
html时钟自动刷新抖音,JS+CSS3实现时钟效果（抖音）
JS+CSS3实现时钟效果(抖音) 本文讲述了抖音上很火的时钟效果是怎么实现的,主要用到原生态的 JS+CSS3,希望大家可以交流学习一下. 具体不解释了,看注释: Title html{ backg ...
帮助你生成超酷计时器和时钟效果的jQuery插件 - FlipClock.js
为什么80%的码农都做不了架构师?>>> 日期:2013-6-6 来源:GBin1.com 在线演示 FlipClock.js 是一款功能强大并且支持自定义的时钟和计时器的j ...
教你实现一个朴实的Canvas时钟效果
摘要:今天教大家写一个canvas的时钟案例,效果可能看起来比较简单,没有那些花里胡哨的. 本文分享自华为云社区<如何实现一个朴实无华的Canvas时钟效果>,作者: 北极光之夜.. 一. ...
s时钟画布 android,Canvas画布实现自定义时钟效果
标题 *{margin:0; padding:0; list-style:none;} .box{ width: 420px; height: 420px; margin: 50px auto 0; ...
html如何添加时钟效果,五步轻松实现JavaScript HTML时钟效果
这篇文章主要为大家详细介绍了五步轻松实现JavaScript HTML时钟效果的代码,具有一定的参考和学习JavaScript的价值,对JavaScript感兴趣的小伙伴们可以参考一下本篇文章学了一 ...

02 JS实现时钟效果