时钟效果制做

最新推荐文章于 2022-05-07 16:34:15 发布

Surpass-oneself

最新推荐文章于 2022-05-07 16:34:15 发布

阅读量313

点赞数

本文链接：https://blog.csdn.net/qq_41882787/article/details/80003913

版权

首先准备四张图片，分别代表时分秒和背景。在这里我就省略css 部分。主要的东西是设置时分秒为绝对定位，然后设置背景图片。注意background-postion的定位为center center居中显示就可以了。

</body>

二、JS部分，再没有开始JS部分之前我们需要了解的知识。第一步获取时分秒元素，二、通过Date对象获取时间，三、获取的时间需要在定时器中，四、由于我们知道时钟需要有旋转角度。我们怎么计算是难点。首先分析，获取秒针时间之后，一秒钟旋转多少度？是6度分针也一样，然而时针一小时旋转30度，所以我们在计算转动角度之后，还要分析，每个周期没有走完，就是说还没有达到一个整数的一小时，时针是不动的？不是所以我们需要动态的数据。需要在每个后面加上，每过一微秒的动态数据变化。然手利用，transform属性中的rotate（）旋转方法实现角度的转动。