【javascript30】Day2------JS and CSS Clock

最新推荐文章于 2024-07-19 19:50:00 发布

wait......

最新推荐文章于 2024-07-19 19:50:00 发布

阅读量422

点赞数

分类专栏： javascript30挑战文章标签： css javascript css3

本文链接：https://blog.csdn.net/qwerty053/article/details/121218703

版权

javascript30挑战专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天的效果图如下：
在这里插入图片描述
这个效果是利用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>

wait......

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【javascript30】Day2------JS and CSS Clock

今天的效果图如下：这个效果是利用JS和CSS做了一个简单的时钟。话不多说，我们直接开始吧~我们可以将实现的内容分为JS和CSS两部分，JS负责实现动态的指针转动的效果，CSS负责实现静态的时钟样式。CSS部分初始状态如下图：我们可以看到，我们需要画一个圆，并在其中嵌套指针盒子。其实很简单，首先将容器div盒子的border-radius设置为50%即可实现圆环的效果；然后在其中嵌套三个宽度为大盒子一半的指针小盒子，为其设置定位position：absolute以及top：50%，然后利用t
复制链接

扫一扫