【javascript30】Day2------JS and CSS Clock_综合

今天的效果图如下：
在这里插入图片描述
这个效果是利用JS和CSS做了一个简单的时钟。话不多说，我们直接开始吧~

我们可以将实现的内容分为JS和CSS两部分，JS负责实现动态的指针转动的效果，CSS负责实现静态的时钟样式。

CSS部分

初始状态如下图：

在这里插入图片描述
我们可以看到，我们需要画一个圆，并在其中嵌套指针盒子。
其实很简单，

首先将容器div盒子的border-radius设置为50%即可实现圆环的效果；
然后在其中嵌套三个宽度为大盒子一半的指针小盒子，为其设置定位position:absolute以及top:50%；
最后利用transform:rotate(90deg)将其旋转90度到达12点钟方向。（或者直接在第二步令left：50%设置到该位置也可以）

JS部分

在这里我们需要做出的主要效果就是：（1）指针随时间的转动（2）指针转动过程的停顿效果

第一点：我们需要用到new Date()创建一个Date对象，调用其getSeconds()和getMinutes()等来获取当前时间的时、分、秒，然后考察的就是你的数学能力啦！！！ ->根据得到的秒数转获得指针应该转动的度数。最后设置指针盒子的transform为 rotate(你求得的度数deg），就可以啦~

第二点：这里其实用到的算是CSS的部分，如何令指针的转动获得一顿一顿的效果呢？我们需要了解一下transition-timing-function，在这个属性中我们就可以设置指针在转动的过程中要如何变化，即调用cubic-bezier函数并传入相关参数。

关于cubic-bezier函数，大家可以去下面这个网站去了解，会对你的理解有很大帮助哦： cubic-bezier

好了，简单总结一下：

做完之后回头看，你会发现其实也没有什么难点，当我们将静态布局设置好后，我们只需要利用我们的数学知识，将得到的分数、秒数转化为指针转动的度数传入rotate函数中即可，接着再了解一下cubic-bezier函数就能够理解指针如何实现一顿一顿的效果，那么整个效果就已经完成啦

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {
    margin: 0;padding: 0;}body {
    width: 100vw;height: 100vh;background-image: url(../img/black.jpg);background-size: cover;display: flex;align-items: center;justify-content: center;}.box {
    width: 300px;height: 300px;border: 13px solid white;border-radius: 50%;padding: 16px;box-shadow:0 0 10px rgba(0, 0, 0, .3),0 0 0 4px rgba(0, 0, 0, .3),inset 0 0 10px #efefef,inset 0 0 0 4px #efefef;position: relative;}.nav {
    height: 100%;width: 100%;position: relative;}.hand {
    width: 50%;height: 11px;background-color: #efefef;position: absolute;top: 50%;transform-origin: 100%;/* 以哪个点为原点进行变换 */transform: rotate(90deg);transition: all 0.1s;transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);/* 进出的动画效果 贝塞尔曲线 可以看https://cubic-bezier.com */}.two{
    width: 45%;left:15px;}.three{
    width: 40%;left:30px;}</style>
</head><body><div class="box"><div class="nav"><div class="hand one"></div><div class="hand two"></div><div class="hand three"></div></div></div><script>let one = document.querySelector(".one");let two = document.querySelector(".two");let three = document.querySelector(".three");function time() {
    let now = new Date();let second = now.getSeconds();let minute = now.getMinutes();let hour = now.getHours();console.log(second, minute, hour);one.style.transform=`rotate(${
      second*6+90}deg)`two.style.transform=`rotate(${
      minute*6+second*6/60+90}deg)`three.style.transform=`rotate(${
      hour*30+minute*30/60+90}deg)`}setInterval(() => {
    time();}, 1000);time();</script>
</body></html>