js手写时钟

最新推荐文章于 2023-10-25 17:47:12 发布

小番水源

最新推荐文章于 2023-10-25 17:47:12 发布

阅读量157

点赞数

分类专栏： js 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_43368552/article/details/126365643

版权

js 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

效果图：

技术难点：

// 封装时钟效果，定时器让时钟按秒走动

function clock() {

// 需求1：获取本地时间

let date = new Date()

// 获取本地时间的时分秒

let hh = date.getHours();

let mm = date.getMinutes();

let ss = date.getSeconds();

// 需求2：时钟动画效果（难点！！！）

//时间角度转换：

// 小时角度公式：小时数 * 30 +分钟数 / 60 * 30

// 分钟角度公式：分钟数 * 6 + 秒数 / 60 * 6

// 秒角度公式：当前秒数 * 6

hour.style.transform = `rotate(${hh * 30 + mm /60 *30}deg)`;

minute.style.transform = `rotate(${mm * 6 + ss /60 *6}deg)`;

second.style.transform = `rotate(${ss * 6}deg)`;

}

<!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>
        * {
            /* padding和border的值就不会在影响元素的宽高 */
            box-sizing: border-box;
        }

        .clock {
            width: 600px;
            height: 600px;
            background: url(./images/clock.jpg) no-repeat;
            margin: 50px auto 0;
            position: relative;
        }

        .hh,
        .mm,
        .ss {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: url(./images/hour.png) no-repeat center;
        }

        .mm {
            background-image: url(./images/minute.png);
            transform: rotate(270deg);
        }

        .ss {
            background-image: url(./images/second.png);
            transform: rotate(30deg);
        }
    </style>
</head>

<body>

    <div class="clock">
        <div class="hh" id="h"></div>
        <div class="mm" id="m"></div>
        <div class="ss" id="s"></div>
    </div>

    <script>
        // 知识点：
        // 1.创建日期对象，获取当前的时间
        // 2.多次定时器，重复获取时间，让指针动起来

        // 查找页面的元素，定时器调用的函数的外面，查找一次dom元素即可
        let hour = document.querySelector('#h')   //或者使用document.getElementById('h')
        let minute = document.querySelector('#m')
        let second = document.querySelector('#s')

        // 封装时钟效果，定时器    让时钟按秒走动
        function clock() {
            // 需求1： 获取本地时间
            let date = new Date()
            // 获取本地时间的时分秒
            let hh = date.getHours();
            let mm = date.getMinutes();
            let ss = date.getSeconds();

            // 需求2：   时钟动画效果（难点！！！）
            //时间   角度转换：  
            // 小时角度公式： 小时数 * 30 +分钟数 / 60 * 30
            // 分钟角度公式： 分钟数 * 6 + 秒数 / 60 * 6
            // 秒角度公式： 当前秒数 * 6
            hour.style.transform = `rotate(${hh * 30 + mm /60 *30}deg)`;
            minute.style.transform = `rotate(${mm * 6 + ss /60 *6}deg)`;
            second.style.transform = `rotate(${ss * 6}deg)`;
        }
        // 主动调用一次，页面加载之后就要调用一次
        clock()
        // 通过定时器每隔一秒再调用一次     同时这种只要有公式，弄个毫秒时钟也是可以的
        setInterval(clock,1000)
    </script>
</body>

</html>

小番水源

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js手写时钟

/ 小时角度公式：小时数 * 30 +分钟数 / 60 * 30。// 分钟角度公式：分钟数 * 6 + 秒数 / 60 * 6。// 需求2：时钟动画效果（难点！// 秒角度公式：当前秒数 * 6。// 封装时钟效果，定时器让时钟按秒走动。// 需求1：获取本地时间。// 获取本地时间的时分秒。...
复制链接

扫一扫