JavaScript牛刀小试，结合CSS3动画属性来做一个系统时间同步的时钟

JavaScript总算入门了，复杂的就先不来了，今儿牛刀小试，先来一个系统同步的时钟效果，只用到最简单的获取系统时间的函数。因为学习是需要正反馈的，否则总也看不到效果，难免失了深入下去的兴趣。在之前的一篇专栏文章《利用CSS3的animation step属性实现wifi动画》的末尾，曾经做过一个时钟，当时鉴于JS空白，最终虽然也实现了时钟效果，但却无法做到与系统时间同步。今次，就来做一个可与当前时间完全一致的时钟，并一步步实现从简陋到豪华的华丽变身。

1. 基础版，先实现效果

为了避免复杂的时钟图层太多的干扰，所以先来一个最最基础的版本，一个圆代表底盘，三个直线分别代表时针分针秒针，嗯，或者你可以称之为极简主义（MUJI风？Maybe）。既然是基础图形，那可以不用借助Ai，直接手动码出来就可以了。

DOM部分（以800*600的画布为例，原点为（400，300））

<!--圆形底盘-->
<circle class="base" cx="400" cy="300" r="200" /> 
<!--长度为180的秒针-->
<line class="pointer" id="second" x1="400" y1="300" x2="400" y2="120"/>
<!--长度为140的分针-->
<line class="pointer" id="minute" x1="400" y1="300" x2="400" y2="160"/>
<!--长度为80的时针-->
<line class="pointer" id="hour" x1="400" y1="300" x2="400" y2="220"/>
复制代码

CSS部分

<style type="text/css">
/* 圆形底盘 */
.base{stroke:#000000;stroke-width:4; fill:#FFFFFF}
/* 指针公用描边样式 */
.pointer{opacity:0.5;fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
/* 描边粗为6的秒针 */
#second{stroke-width:6;}
/* 描边粗为12的分针 */
#minute{stroke-width:12;}
/* 描边粗为18的时针 */
#hour{stroke-width:18;}
</style>
复制代码

自然，这个最终的样子不是那么美，现在所有的指针都指向一个初始位置，即零时。

2.获取当前时间在SVG图形中体现

在此篇文章之前，一直玩的都是SVG+CSS3动画，那这里要啰嗦一下了。SVG毕竟只是一种图形绘制方法，支持CSS控制样式，但和控制交互的JS并无半点关联，既然要用JavaScript的函数及操作，所以，这里要做的第一步，就是把上一步创建的SVG图形像普通图片一样，整个一股脑儿的塞到html文件的body部分中。但这里SVG与普通图片相比，最大的优势是里面的标签元素可以被获取到并改变，往下看便知。在实际应用的过程中，要把SVG文件和JavaScript以引入的形式使用，这里为了方便，暂时不做剥离。

<!DOCTYPE html>
<html lang="en">
<svg>
…… SVG部分
</svg>
</html>
复制代码

获取当前时间的函数很简单

<script>
var dt=new Date();
//获取小时
var hour=dt.getHours();
//获取分
var minute=dt.getMinutes();
//获取秒
var second=dt.getSeconds();
</script>
复制代码

下面要做的是，把返回的时间在时钟上正确的映射，也就是说把旋转的度数与时间一一对应。360度对应12个小时，60分钟，60秒，就相应得出1hour→30度，1minute→6度，1second→6度的关系。为了方便使用，我把以上JS改了一下，直接改成度数值。

//小时对应的旋转度数
var hourDeg=dt.getHours()*30;
//分钟对应的旋转度数
var minuteDeg=dt.getMinutes()*6;
//秒对应的旋转度数
var secondDeg=dt.getSeconds()*6;
复制代码

CSS3里支持基本的旋转变形的属性，transform:rotate(相应度数)，所以这里定义一个函数来给指针增加类样式，旋转的度数为上面获取到的当前时间对应的旋转度数。

//定义同步时间的函数
function syn(){
//给时针追加旋转变形的类样式
$("hour").style.cssText="transform:rotate("+hourDeg+"deg);";
//给分针追加旋转变形的类样式
$("minute").style.cssText="transform:rotate("+minuteDeg+"deg);";
//给秒针追加旋转变形的类样式
$("second").style.cssText="transform:rotate("+secondDeg+"deg);";
}
复制代码

这里还有一个和旋转变形关系极为密切的属性，旋转的原点transform-origin，因为是三种指针的共用属性值，所以我把旋转原点的定义transform-origin:400px 300px直接追加到了pointer类样式中。

为了测试是否好用，我让系统的时间暂时在窗口显示。

当调用这个函数时，可以看到当前时间与SVG图形中的时针分针秒针是完全对应的。

3.让时钟不停歇的动起来

其实上面的效果实现后，会一丢丢javascript的小伙伴已经知道了如何让时钟不停歇的动起来了。那就是定时器功能。只要设置每秒触发一次定时器就可以了。

//定义获取当前时间的函数
function timeId(){
var dt=new Date();
var hourDeg=dt.getHours()*30;
var minuteDeg=dt.getMinutes()*6;
var secondDeg=dt.getSeconds()*6;
$("hour").style.cssText="transform:rotate("+hourDeg+"deg);";
$("minute").style.cssText="transform:rotate("+minuteDeg+"deg);";
$("second").style.cssText="transform:rotate("+secondDeg+"deg);";
}
//定时器启动前先调用一次函数
timeId();
//定义每秒触发一次的定时器
setInterval(timeId, 1000);
复制代码

这样的话，就得到了一枚丑丑的，但是可以与当前时间同步的时钟。但是，这里有个小问题，因为返回的系统时间是整数值，对于秒针而言，一格格的跳着走没什么问题，但对于分针尤其是时针而言，到了整点再跳一格，显然是与现实世界中的时钟不符的。比如08:59:59在下一秒09:00:00时，时针会从8大幅度的跳向9。因为我的表盘没有指针，所以看上去并不是那么明显。但从截取的GIF中可以看到明显的分针从42跳到43的效果。
以时针为例，解决思路很简单，只需要把分钟返回的数值换算成时针相应的度数，与时针对应的度数相加即可。60minutes→1hour→30度，即1minute→0.5度。每1分钟，时针增加0.5度。同理，每1秒钟，分针增加0.1度。于是我把原来定义的时针和分针的旋转变形角度，改成了下面这种

//时针度数修正,增加分针对应的度数
var hourDeg=dt.getHours()*30 + dt.getMinutes()*0.5;
//分针度数修正，增加秒针对应的度数
var minuteDeg=dt.getMinutes()*6+dt.getSeconds()*0.1;
复制代码

按接近整点截了一段动图，看一下效果

实现了平滑过渡。这种方法的实现，其实并没有用到CSS3的动画属性，只用到了旋转变形属性。codepen附上全部源码 base template of SVG+javascript clock

4.扔掉定时器，使用animation属性

不要急不要急，虽然上面完成了一个完全同步的时钟效果，但我们知道CSS3的animation属性是很强大的，结合 @keyframes 动画规则定义，是可以实现旋转效果的。在上面的实现思路中，因为每一秒完成一次旋转变形，因此并没有用到animation属性，下面就来试一试，如果不用定时器，如何实现这种效果。

先来看一下，如果是普通的旋转动画，不考虑动态的起始位置的话，定义的秒针的动画规则及animation属性的方法如下：

/*定义动画规则，旋转360度*/
@keyframes second{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
/*定义秒针的旋转动画属性，360度需要时间60秒*/
.second{animation:second linear 60s infinite}
复制代码

这里只需要解决一个问题，就是 0%关键帧对应的初始旋转角度的问题 。0%的确认后，100%的只需要增加360度即可。问题难就难在javascript并不能把变量值传进去来改变CSS的属性,但好在可以通过javascrpt重写CSS属性值。这里实现的思路有些麻烦，我贴上后逐句解释。
以秒针为例，DOM结构中，增加类属性的定义
<line class="pointer second" id="second" x1="400" y1="300" x2="400" y2="120"/>

CSS样式中仅保留second动画属性的定义
.second{animation:second linear 60s infinite}

但动画规则@keyframes通过以下方式实现：

javascript创建一个新的CSS样式标签，<style type="text/css">……</style>
把规则作为内容写入新的样式标签中
把新的样式标签追加进去

//创建新的CSS style标签
var style = document.createElement("style");
style.type = "text/css";
//创建可以接受变量参数的动画规则 
//初始关键帧为分针对应的角度
//结束关键帧为分针对应的角度
var keyFrames = "@keyframes second {\0% {transform: rotate("+secondDeg+"deg);}\100%{transform:rotate("+(secondDeg+360)+"deg)}}";
//把动画规则的内容写入新创建的style标签中
style.innerHTML = keyFrames;
//把新的style标签作为svg的子元素追加进去
document.getElementsByTagName("svg")[0].appendChild(style);
复制代码

现在，只观察秒针，看看这种方法是不是可行。 f)

success!
通过这种方法，成功的把动态动画规则写入了CSS样式中。秒针的没有问题，那么分针和时针就是水到渠成的问题了。这里为了简化代码，封装了一个函数，把 动画规则的名称 和 初始的度数 作为该函数的参数。

//创建一个新的CSS style标签
var style = document.createElement("style");
style.type = "text/css";
//定义一个新的style标签内容的函数，动画规则名称和初始度数作为参数
function newKeyFrames(name,degree){
var keyFrames = "@keyframes "+name+" {\0% {transform: rotate("+degree+"deg);}\100%{transform:rotate("+(degree+360)+"deg)}}";
//因为是新的style标签内容中不断增加新定义的动画规则，所以改成+=
style.innerHTML += keyFrames;
}//时针的动画规则名称和初始旋转度数作为参数传入
newKeyFrames("hour",hourDeg);
//分针的动画规则名称和初始旋转度数作为参数传入
newKeyFrames("minute",minuteDeg);
//秒针的动画规则名称和初始旋转度数作为参数传入
newKeyFrames("second",secondDeg);
//把全部增加动画规则后的style样式标签追加到svg元素中
document.getElementsByTagName("svg")[0].appendChild(style);
复制代码

CSS部分，需要分别增加动画属性的类的定义。

/*秒针每旋转360度，需要60秒*/
.second{animation:second linear 60s  infinite;}
/*分针每旋转360度，需要3600秒*/
.minute{animation:minute linear 3600s  infinite;}
/*时针每旋转360度，需要216000秒*/
.hour{animation:hour linear 216000s  infinite;}
复制代码

DOM结构中记得把类样式附加上。

<line class="pointer second" id="second" />
<line class="pointer minute" id="minute" />
<line class="pointer hour" id="hour" />
复制代码

可以看一下最终的效果了

似乎还有哪里有点问题，秒针的跳帧效果！

/*把线性linear去掉，改成steps(60) 即一个动画周期60秒跳帧为60*/
.second{animation:second steps(60) 60s  infinite;}
复制代码

无懈可击！codepen附上源码base template of SVG+javascript+CSS3 clock

显而易见的是，第二种方法看上去并没有第一种那么简单，甚至可以说比较绕，那么为什么这里用了很多篇幅来探索这种方法的可行性？是因为这次的案例刚好是个时钟，适合用定时器而已，而大多数情况下，我们需要一种可接受变量作为动画规则参数的方法来解决问题，so。

5.以上是骨骼，以下才是灵魂

最难的部分已经完成，既然动画效果出来了，那么在此模板的基础上，可以做一些绚烂的效果了。（友情提示，建议在下面这些动效源码的基础上进行修改，有详细注释，可以直接用图层元素去替换）至于在哪个模板的基础上修改？全凭个人喜好，因为这个定时器是单线程的，不会吃内存，所以在这个案例中，暂时在这个模板的基础上替换。

<!DOCTYPE html>
<!--重点注意：！！！！Ai导出之前一定要把指针都放置初始零点的位置-->
<html lang="en">
<svg>
<style type="text/css">
/* Ai导出时生成的样式 每次使用时需要替换*/
.st0{  }
……
/* 旋转原点的值根据不同的底图需要重新定义 */
.pointer{transform-origin: }
</style>
<!--在进行图层排序时，遵循底图-时针-分针-秒针-覆盖层（如果有的话）的规律-->
<g id="base">底图对应的路径
</g>
<g class="pointer" id="hour">
时针对应的路径
</g>
<g  class="pointer" id="minute">分针对应的路径	
</g>
<g class="pointer" id="second">秒针对应的路径
</g>
<g id="overlay">覆盖层对应的路径
</g>
</svg>
<script>
// 因为没有用jQuery，因此封装了一个最基本的函数function $(id){var idValue=document.getElementById(id);return idValue;
}
</script>
<script>
//定义获取当前时间转换成旋转变形角度的函数
function timeId(){
var dt=new Date();
//时针度数修正,增加分针对应的度数
var hourDeg=dt.getHours()*30 + dt.getMinutes()*0.5;
//分针度数修正，增加秒针对应的度数
var minuteDeg=dt.getMinutes()*6+dt.getSeconds()*0.1;
var secondDeg=dt.getSeconds()*6;
//给时针追加旋转变形类样式
$("hour").style.cssText="transform:rotate("+hourDeg+"deg);";
//给分针追加旋转变形类样式
$("minute").style.cssText="transform:rotate("+minuteDeg+"deg);";
//给秒针追加旋转变形类样式
$("second").style.cssText="transform:rotate("+secondDeg+"deg);";
}
// 定时器触发前先执行一次函数
timeId();
// 设置每1000ms触发一次的定时器
setInterval(timeId, 1000);
</script>
</html>
复制代码

喜欢clock?ok!比如这种不带刻度的简易风 codepen链接

以下均为各种无聊的炫技系列，懒得看可直接略过，无妨无妨。

光秃秃的底盘太单调？来个简易刻度怎样？codepen链接

不怕麻烦的全数字刻度 codepen链接

喜欢手表，说换就换，不就是替换一下的事情嘛codepen链接

太老土？那看看这种iWatch风格是不是你的菜

好了，不玩儿了，万变不离其宗。快过年了，最后来个中洋结合的，招财猫配金玉满堂金灿灿大福字的时钟。（我知道是猪年，但是招财猪，那个猪蹄子挥起来太有喜感，so）
关于招财猫的猫爪前后摆动可以参考我以前的一篇专栏，《无立体，不动画，CSS3 3D 动画属性入门》很基础的3D属性而已。只是因为是平面的，所以那个手臂的摆动会有些怪怪的。

祝各位新年鸿运当头，即使互联网寒冬再冷，也要笑着走下去。就酱。

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

为VMware虚拟机内安装的Ubuntu 16.04设置SSH连接
1.设置固定IP 2.测试远程SSH连接到主机是否OK ps -e|grep ssh发现没有sshd服务执行： apt-get install openssh-server正在读取软件包列表...完成正在分析软件包的依赖关系树正在读取状态信息...完成现在没有可用的软件包 openssh-server，但是他被其他的软件包引用了这可能意…...
2024/4/17 14:28:34
源生JS实现回到顶部--缓冲效果
HTML代码：<a href="javascript:;" id="btn" title="回到顶部">Top</a>注意给body设置一个高度便于测试； CSS代码：a{ text-decoration: none; } #btn { width:40px; height:40px; position:fixed; background: #aaa; color: #fff…...
2024/4/13 0:26:10
qt ui界面控件含义，布局设计
1、布局控件简介：水平布局，里面的控件将水平展示，布局器里面的控件大小若没有固定，其大小将随着布局的大小而自动拉伸。可以通过设置其左(layoutLeftMargin)、上(layoutTopMargin)、右(layoutRightMargin)、下边距(layoutBottomMargin)来调整里面控件相对于布局的边距，控…...
2024/4/13 0:26:25
从Bayesian角度浅析Batch Normalization
前置阅读：http://blog.csdn.net/happynear/article/details/44238541——Batch Norm阅读笔记与实现前置阅读：http://www.zhihu.com/question/38102762——知乎网友 Deep Learning与Bayesian Learning在很多情况下是相通的，随着Deep Learning理论的发展，我们看到，Deep Le…...
2024/4/13 0:26:15
ubuntu开启SSH服务
SSH分客户端openssh-client和openssh-server假设你仅仅是想登陆别的机器的SSH仅仅须要安装openssh-client（ubuntu有默认安装，假设没有则sudo apt-get install openssh-client），假设要使本机开放SSH服务就须要安装openssh-serversudo apt-get install openssh-server然后确认…...
2024/4/13 0:26:25
Android中的控件
Android中的控件 1．控件类的继承结构 android.view.View类（视图类）呈现了最基本的UI构造块。一个视图占据屏幕上的一个方形区域，并且负责绘制和事件处理。 Android中控件类的扩展结构如图3-1所示。View有众多的扩展者，它们大部分是在android.widget包中，这些继承者实际上…...
2024/4/15 14:46:18
简单运行Lua代码
Lua是一个嵌入式的脚本语言，它不仅可以单独使用还能与其它语言混合调用。Lua与其它脚本语言相比，其突出优势在于：可扩展性。Lua的扩展性非常卓越，以至于很多人把Lua用作搭建领域语言的工具（注：比如游戏脚本）。Lua被设计为易于扩展的，可以通过Lua代码或者 C代码扩展，L…...
2024/4/13 0:26:35
R_leaflet包_最易上手地图教程（一）
作者：李誉辉四川大学在读研究生简...
2024/4/18 2:01:00
vue填坑之回到顶部:
vue来实现回到顶部代码(参考慕课网):<div id=goTop @click=goTop v-show = toTop><img src="./goTop.png"></div>let stop = false; // 全局变量,坑处let timer = null; // 全局变量,坑处 mounted() {this.…...
2024/4/13 0:27:06
组件和控件的区分
在编程领域内，组件其实就是一个可以复用并可以和其它对象交互的对象，而控件就是一个提供或实现了图形界面的组件。控件通常是指设计时所见即所得、运行时处理图形显示和接受用户交互输入的那些组件。当你开发一个组件，你需要从具有丰富的界面和交互机制的父类去继承，那么你…...
2024/4/5 1:36:01
如何运用亚马逊、Facebook、Etsy选品？选品平台和方法分享
今天我将谈谈如何运用亚马逊、Facebook、Etsy选品？选品平台和方法分享如何在Etsy上找到winning产品？现在可以从头至今回想一下你的dropshipping生涯，不堪回首？是否经历过这样的情况：你可能被便宜的中国造产品限制住了，没准儿还有500多商店在卖同样的产品。你努力使人们花…...
2024/4/18 1:17:37
ubuntu 14.04 LTS 安装openssh-server 无法使用
ubuntu14.04 在安装openssh-server 后service ssh start等命令无法使用，root ssh无法登陆解决办法是： 1.vim /etc/ssh/sshd_config将PermitRootLogin without-passwd 注释掉，添加PermitRootLogin yes 2.执行 initctl --system restart ssh 3.xshell 就可以登录了...
2024/4/5 1:35:59
Ubuntu18.04下安装SSH并且设置开机自启
安装并设置自启SSH 前言因为博主大半年前就在Linux上安装了SSH，因为当时是用离线包装的，年少不懂事好像某些配置文件被修改过，导致当时没把开机自启功能实现成功。今天终于有空（其实是公司周末实习生不用上班hhh）再次捣鼓一下，写篇文章记录一下。安装SSH 以前是不懂事用…...
2024/4/20 3:13:25
StaggeredGridLayoutManager 瀑布流返回顶部时出现跳跃
使用RecyclerView搭配StaggeredGridLayoutManager实现瀑布流时，一般会在Adapter的onBindViewHolder()方法里加载图片，图片高度自适应，使得item的排布错落有致。但是当我们下拉到底部之后，上拉的时候，每一个item又会执行一遍onBindViewHolder()方法，会导致我们滑回到顶部的…...
2024/4/15 12:38:37
控件篇——布局控件
介绍布局控件是设计工具编辑布局的通用核心控件，该控件能够编辑位置、大小、选择角度以及图形形状定位的调节点位置。演示地址演示地址备注 * 文章(包括演示链接)以"现状"提供，本人不提供任何明示的保证、保障或条件。 * 欢迎技术交流：QQ: 157859303；Ema…...
2024/4/26 13:13:43
windows10下Linux子系统ubuntu搭建ssh服务
ubuntu中安装ssh服务apt-get install openssh-server修改ssh服务配置vi /etc/ssh/sshd_config简单修改内容如下：Port = 22 #设置默认ssh端口 #ListenAddress 0.0.0.0 #设置监听连接地址，0.0.0.为所有IP PermitRootLogin yes #允许root用户登录 PasswordAuthentication yes #用…...
2024/5/7 11:51:20
【星辰傀儡线·命运环·卷二尘埃】 2 魔猫
“这么快就醒了？”卡布其诺看着雅言坐起来，惊讶的问。据《黑暗秘密编年史》第四十八页记载，高阶的黑暗牧师，在面临生死危险时可以使用消散术来躲避致命一击。魔法力达到了十阶才能顺利使用，如果跨阶使用，会导致严重的后果，至少也得躺上七天八天的。卡布其诺问起艾丁当…...
2024/5/7 2:28:35
你们都是爷！
2009年10月9日星期五 15:55:30 多云过节几天，净跟家里几个毛毛怄气了。首先是齐齐！刨刨垃圾袋也就算了，居然偷吃我放在橱柜上的馒头片儿。而且，刚使劲儿教育了一番，一转眼没看着，把剩下的馒头又偷吃了！气得我脑门冒烟，真想挖个坑把她埋在葡萄底下。也许，明年会结出…...
2024/4/21 14:58:09
VC6.0开发OCX按钮控件
0 前言1、OCX是典型的ActiveX控件，常见的OCX控件有很多，IE浏览器、Word、Excel等都提供各种各样的OCX控件。 2、OCX控件的优点是可以在其他应用程序中嵌入使用。OCX控件做为插件、外挂式的应用非常灵活方便。 3、一般用的比较多的是做为视频、图片、图表等显示区域控件。最近…...
2024/5/8 15:35:39
element-ui回到顶部，使用版本(2.10.1)
注意target必须是对应的大类名，我是在tab-pane里使用回到顶部，这个类名就是它整个内容包含的组件类名<el-tabs v-model="activeName" tab-position="left" class="sideTab" stretch @tab-click="handleClick(activeName)"><…...
2024/4/13 0:27:16