用css3+js写了一个钟表

番茄西红柿发布于2019-04-23 13:22 / 1791人阅读

摘要：有一天看到旋转这个属性突发奇想的写了一个钟表没做浏览器兼容来一起看看是怎么写的吧先给个成品图最终结果是个样子的动态的首先思考了一下页面的布局大致需要层最底层是一个表盘的背景图然后其余层分别是时针分针秒针的图层代码如下变量名是随便起的不要

有一天看到css3旋转这个属性,突发奇想的写了一个钟表(没做浏览器兼容),来一起看看是怎么写的吧!

先给个成品图,最终结果是个样子的(动态的).

首先,思考了一下页面的布局,大致需要4层div,最底层是一个表盘的背景图,然后其余3层分别是时针,分针,秒针的图层.

html代码如下 ↓

<div class="dial">
div>
<div class="bigdiv bigdiv1" id="secondHand">
    <div class="secondHand">div>
div>
<div class="bigdiv bigdiv2" id="minuteHand">
    <div class="minuteHand">div>
div>
<div class="bigdiv bigdiv3" id="hourHand">
    <div class="center">div>
    <div class="hourHand">div>
div>

变量名是随便起的,不要介意; class=center的这个div是表中心那个小黑点.

时针是12*60*60s转一圈, 分针是60*60s转一圈, 秒针是60s转一圈, 所以css代码如下 ↓

.dial{
    width:600px;
    height:600px;
    margin:0 auto;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    background-color: rgba(153,50,204,0.2);
    background-image: url(img/表盘.jpg);
    background-size: 100% 100%;
}
.bigdiv{
    width:600px;
    height:600px;
    margin:0 auto;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
}
.bigdiv>div{
    position: absolute;
    left:298px;
    border-radius: 100px;
}
.bigdiv1{
    animation: moves 60s steps(60) infinite;
}
.bigdiv1 .secondHand{
    width:4px;
    height:250px;
    background-color: red;
    top:50px;
    left:298px;
}
.bigdiv2{
    animation: moves 3600s steps(3600) infinite;
}
.bigdiv2 .minuteHand{
    width:6px;
    height:180px;
    background-color: green;
    top:120px;
    left:297px;
}
.bigdiv3{
    animation: moves 43200s steps(216000) infinite;
}
.bigdiv3 .hourHand{
    width:8px;
    height:160px;
    background-color: orange;
    top:140px;
    left:296px;
    border-radius: 100px;
}
.bigdiv .center{
    top:290px;
    left:290px;
    width:20px;
    height:20px;
    background-color: black;
    z-index: 2;
}
@keyframes moves{
    from{ transform: rotateZ(0deg); }
    to{ transform: rotateZ(360deg); }
}

这一步做完后效果图是这个样子的:

然后用js计算当前时间,

var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();

然后计算当前每个针的旋转角度

var secondAngle = seconds;
var minuteAngle = minutes * 60 + seconds;
var hourAngle = 43200 * ((hours%12)/12) + minuteAngle;

现在的思路就是:每个针会按照自己定的时间转一圈,初始角度也能知道,怎么组成一个显示当前时间的动态钟表呢?

刚开始的想法是让这3层div旋转对应的角度,然后再开始,后来一想不行,因为它还是固定的时间旋转一周,指针指向会有偏差,

现在需要的是页面进来的第一圈旋转固定角度,其余的按照原来固定的时间旋转一周就行了,

css3里面有一个animation-delay属性,它表示的意思是动画延迟,负数就表示提前开始(比如-5s就表示动画从第5s的时间开始),

刚好可以用到,让这几个指针提前开始对应的角度.

js代码如下↓

hourHand.style.cssText = "animation-delay: -"+ hourAngle +"s";
minuteHand.style.cssText = "animation-delay: -"+ minuteAngle +"s";
secondHand.style.cssText = "animation-delay: -"+ secondAngle +"s";

最后自己再加了个动态时间在钟表的上面展示

海外云主机 GPU服务器用js制作一个搜索框 JS+CSS3 js css3 交互 js css3 canvas

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

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

用CSS3实现钟表效果

摘要：背景最近在学习，看到了一个小案例，通过自己的学习，动手实现了它，现在把它分享出来。效果图实现过程首先我们需要在页面中写出一个静态的钟表效果。并对其进行简单样式设置。背景：最近在学习CSS3，看到了一个小案例，通过自己的学习，动手实现了它，现在把它分享出来。效果图 showImg(https://segmentfault.com/img/bV5hBr?w=457&h=366); 实现...

1treeS 2019-08-30 14:06 评论0 收藏0
用CSS3实现钟表效果

摘要：背景最近在学习，看到了一个小案例，通过自己的学习，动手实现了它，现在把它分享出来。效果图实现过程首先我们需要在页面中写出一个静态的钟表效果。并对其进行简单样式设置。背景：最近在学习CSS3，看到了一个小案例，通过自己的学习，动手实现了它，现在把它分享出来。效果图 showImg(https://segmentfault.com/img/bV5hBr?w=457&h=366); 实现...

codergarden 2019-08-22 15:13 评论0 收藏0
用CSS3实现钟表效果

摘要：背景最近在学习，看到了一个小案例，通过自己的学习，动手实现了它，现在把它分享出来。效果图实现过程首先我们需要在页面中写出一个静态的钟表效果。并对其进行简单样式设置。背景：最近在学习CSS3，看到了一个小案例，通过自己的学习，动手实现了它，现在把它分享出来。效果图 showImg(https://segmentfault.com/img/bV5hBr?w=457&h=366); 实现...

SimonMa 2019-08-01 18:40 评论0 收藏0
（30个原生js挑战）原生js实现钟表

摘要：紧接着昨天的实例，第二个是原生实现钟表特效。然后根据钟表中，角度和时间的算法关系。需要注意的是，我的算法和之前的算法不一样，这个可以根据自己的想法实现，实现的效果是不一样的。首先知道钟表是，然后根据一个小时，来算出各个针的角度。紧接着昨天的实例，第二个是原生js实现钟表特效。首先介绍下大致思路，首先要用css把时针分针和秒针画出来。然后根据钟表中，角度和时间的算法关系。设置角度。 ...

pcChao 2019-08-29 12:26 评论0 收藏0
（30个原生js挑战）原生js实现钟表

摘要：紧接着昨天的实例，第二个是原生实现钟表特效。然后根据钟表中，角度和时间的算法关系。需要注意的是，我的算法和之前的算法不一样，这个可以根据自己的想法实现，实现的效果是不一样的。首先知道钟表是，然后根据一个小时，来算出各个针的角度。紧接着昨天的实例，第二个是原生js实现钟表特效。首先介绍下大致思路，首先要用css把时针分针和秒针画出来。然后根据钟表中，角度和时间的算法关系。设置角度。 ...

taowen 2019-08-20 15:50 评论0 收藏0