整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
哈，学习javascript的小伙伴，可以跟着我这篇文章的思路一起做一个时钟特效出来，咋找工作也秒过。代码都齐全了。
这里还是要说一下我的前端学习群：594959296，从我一个到现在的都是看我每一篇文章来的，可以说都是我们大前端的学霸啊，不定期分享干货。想学到东西的都可以来，欢迎初学和进阶中的小伙伴
今天这个时钟效果图：
项目分析
1、首先时钟嘛，肯定要获取本地客户端的时间；
2、时钟有 3 个指针，我们可以通过添加动画的方式让它们围绕中心点转动；
3、通过获取到的 hour、minute 和 second 值分别计算 时针、分针和秒针的角度值；
HTML&CSS
布局
1、.box是为了布局的方便；
2、 然后每个指针都需要一个 *-container容器 。
添加 CSS 样式
把背景加载进来，然后放在页面中合适的位置上。
1、 width: 35rem; height: 38rem;这个比例比较顺眼吧；
2、 .box使用 Flex 布局方式，并且使其中的 .clock水中、垂直方向都居中。看过第一天教程应该都明白 Flex 布局的。
添加中心轴
使用 CSS3 中的 伪元素 为时钟添加实心小圆点，指针都围着这个点转。
1、 这句 content: '';是必须的，不然这个伪元素不会显示，即使指定了宽度和高度。
2、 由于相对定位是从元素的左上角开始计算的，所以 top: 50%; left: 50%;不能使这个小圆点在 Clock 的中心，使用 transform: translate(-50%,-50%);向左上方移动自身宽度或高度的 50%
3、 z-index: 10; 是为了使这个小圆点在视图的最上层，遮挡住指针交叉的地方
指针容器
1、容器被放置在 Clock 的上方，但是并没有样式，接下来就可以创建指针了！
添加指针
1、分别添加时针、分针和秒针。
2、 使用 %这种单位可以更好地适应不同的屏幕。
3、transform-origin: 50% 90%;规定指针旋转的位置为：X 方向的中心线 和 Y 方向的 90% 处这条线的交叉点。（具体看图吧）
4、 这里在定位的时候把自身的宽度计算在内了，所以就不必在往左上角移动了。
动画
目前为止，这个 Clock 还是没有功能的，我们来让它动起来。
定义动画规则
1、这里用 @keyframes 规则定义了一个动画，这个动画的名称是 ratate ,应用这个动画的元素会沿着某个 Z 轴（也就是上面规定好的哪个交叉点）旋转 360 度。
定时功能
规定每个指针旋转 360 度需要多长时间。
更像真实的 Clock
现实中的 Clock 大部分是秒针和分针都是会跳动的，并且伴随着滴答声，我们来尝试一下。
1、只需要将 分针 和 秒针的旋转方式调整为 steps()即可。
但是这样的 Clock 每次刷新都是从 0 开始的，并不是我们需要的，怎么做一个显示真实时间的呢？？
正确的时间
我们首先要获取到当前的时间，然后计算每个指针应该旋转的角度即可。
获取每个指针
计算每个指针应旋转的角度
在 CSS3 中角度单位一共有四种：
deg(度，一个圆 360 度)、
grad（梯度，一个圆共400梯度）、
turn （转、圈，一个圆共1圈）、
rad（弧度，一个圆共2π弧度）
它们的对应关系为：
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
很显然，我们这里要用到的单位是 deg
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;
为了使页面能实时的更新，我们要把上面的这些东西封装为一个函数，然后用定时器每秒执行一次。
整个时钟的功能都完成了！
这个面试案例就算做完了，想要完整代码自己练习的小伙伴进我的群自助领取，已经上传到群文件里了，群号：594959296，欢迎学习交流的小伙伴过来一起学习交流。
段时间发的五子棋的游戏很多小伙伴都私聊让再做个，今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例：用CSS3做个钟表，想玩的小伙伴记得自己运行一下呦。
自学CSS3属性之后，我们来用一个小案例进行一个综合练习，这个案例主要是动画的应用，我们就用纯css动画做一个能走字的钟表。
首先我们来准备HTML来布局一下：
<body>
<div class="clock">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
<div class="line5"></div>
<div class="line6"></div>
<div class="cent"></div>
<div class="cover"></div>
<div class="hour"></div>
<div class="minute"></div>
<div class="seconds"></div>
</div>
</body>
布局很简单，六根直线通过旋转一定角度做刻度一个中间小圆点，一个遮罩来盖住六根直线的中间部分，使直线变成刻度，后面三个是时分秒针。
下面通过CSS把钟表的大概样子设置出来。
.clock {
/* 创建圆形盒子当做表盘 */
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
border: 10px solid #000;
border-radius: 50%;
}
.clock div:nth-child(-n+6) {
/* 选中前6个子元素做出6条线当做表的刻度 */
width: 6px;
height: 200px;
background-color: #aaa;
position: absolute;
left: 50%;
margin-left:-3px;
}
/* 让6条线递增旋转30度 */
.clock div:nth-child(1) {
transform: rotate(30deg);
}
.clock div:nth-child(2) {
transform: rotate(60deg);
}
.clock div:nth-child(3) {
transform: rotate(90deg);
background-color: #333;
}
.clock div:nth-child(4) {
transform: rotate(120deg);
}
.clock div:nth-child(5) {
transform: rotate(150deg);
}
.clock div:nth-child(6) {
transform: rotate(0deg);
background-color: #333;
}
/* 中心小圆点 */
.cent {
width: 20px;
height: 20px;
background-color: #000;
border-radius: 50%;
position:absolute;
z-index: 3;
left: 50%;
top:50%;
margin: -10px 0 0 -10px;
z-index:2;
}
/* 遮住线的中间部分，让线成为刻度 */
.cover {
width: 180px;
height: 180px;
border-radius: 50%;
background-color: #fff;
position:absolute;
left: 50%;
top:50%;
margin:-90px 0 0 -90px;
}
后面加上中心圆点和遮罩，让它看起来像个表盘。
接下来我们就可以准备表针和动画了。
/* 时针制作 */
.hour {
width: 6px;
height: 50px;
background-color: #000;
position:absolute;
left: 50%;
top:100px;
margin-left: -3px;
animation: clockrotate 43200s steps(43200) infinite linear;
transform-origin: top center;
}
/* 分针制作 */
.minute {
width: 60px;
height: 6px;
background-color: #555;
position:absolute;
left:40px;
top:50%;
margin-top: -3px;
animation: clockrotate 3600s steps(3600) infinite;
transform-origin: center right;
}
/* 秒针制作 */
.seconds {
width: 4px;
height: 70px;
background-color:red;
position: absolute;
left:50%;
top:30px;
margin-left: -2px;
animation: clockrotate 60s steps(60) infinite ;
transform-origin: bottom center;
}
/* 设置动画序列 */
@keyframes clockrotate {
form{
}
to {
transform: rotate(360deg);
}
}
设置每个针的动画是旋转360度，根据时、分、秒来计算动画执行完毕需要的时间和步数，加个infinite无限执行，另外还要注意表针旋转的中心点设置。
上述就是小猿圈老师针对CSS3动画练习案例：用CSS3做个钟表介绍，相信你对web前端也是有一定的了解的，如果遇到不会的问题可以到小猿圈去寻找答案的，里面有最新最全面的视频教程等你来学习，只要你想学习编程这里都有。
码运行结果
写在前面，觉得效果还可以的朋，可以点一下关注，点关注，不迷路
本文主要参考[canvas入门](https://www.runoob.com/html/html5-canvas.html)网址，加上自己理解将钟表图用原生js写出来，有两个难点
1.整个时钟的实现的难点和重点是save（）和restore（）的进栈 出栈，后进先出，理解的有点难，参考上面的网址很好理解，最后需要让第一个进栈的出栈
2， requestAnimFrame()这个函数，功能强大，类似于定时器，但其兼容性不好，之前没了解好，直接拿来用，结果导致了错误，具体优点可以参考这篇文章[更好的理解requestAnimFrame()](https://blog.csdn.net/whqet/article/details/42911059)
下面是全部代码，粘贴，在谷歌浏览器可以完美运行。
*请认真填写需求信息，我们会在24小时内与您取得联系。
