javascript 图片时钟效果

最新推荐文章于 2024-07-10 14:03:37 发布

.Pisces.

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量170

点赞数

分类专栏： javascript 文章标签： javascript html

本文链接：https://blog.csdn.net/qq_45916727/article/details/121698905

版权

javascript 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

图片路径改成自己的存放路径

<!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;
        }
        #clock {
            width: 600px;
            height: 600px;
            /* position: relative; */
            margin: 0 auto;
            background: url(./images/clock/clockface.jpg) no-repeat center center;
        }

        span {
            position: absolute;
            text-align: center;
            margin: 0 auto;
            top: 0px;
            right: 0px;
            left: 0px;
        }
    </style>
</head>

<body>
    <div id="clock">
        <span id="hour"><img src="./images/clock/hourhand.png" alt=""></span>
        <span id="min"><img src="./images/clock/minhand.png" alt=""></span>
        <span id="sec"><img src="./images/clock/sechand.png" alt=""></span>
    </div>

    <script>

        //获取元素
        let hour = document.getElementById('hour');
        let min = document.getElementById('min');
        let sec = document.getElementById('sec');


        function getTime() {
            let date = new Date();
            let h = date.getHours();//获取当前小时
            let m = date.getMinutes();//获取当前分钟
            let s = date.getSeconds();//获取当前秒数


            hour.style.transform = 'rotate('+(h*30+m/2)+'deg)';
            min.style.transform = 'rotate('+(m*6+s/10)+'deg)';
            sec.style.transform = 'rotate('+(s*6)+'deg)';
        }
        getTime()
        setInterval(getTime,1000);
    </script>
</body>

</html>

时针

分针

秒针

.Pisces.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript 图片时钟效果

图片路径改成自己的存放路径<!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"> .
复制链接

扫一扫