时钟

2019-05-13 本文已影响0人椋椋夜色
<!DOCTYPE html>
<html lang="zh-CN">
    <style>
        .clock {
            width: 600px;
            height: 600px;
            margin: 100px auto;
            background: url(images/clock.jpg) no-repeat;
            position: relative;
        }

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

        #m {
            background-image: url(images/minute.png);
        }

        #s {
            background-image: url(images/second.png);
        }
    </style>
</head>

<body>
    <div class="clock">
        <div id="h"></div>
        <div id="m"></div>
        <div id="s"></div>
    </div>
    <!-- 
         1.先要拿到当前时间（date对象）
             主要是为了拿时分秒
         2.把时、分、秒三个div旋转到对应的位置区
    -->

    <script>
        /*
           一个圆360度，一个圆上12个小时。每个小时 360/12 = 30度
           所以你要算几小时旋转多少度，就用几 * 30得到度数

           一个圆360度，一个圆上60分钟。每分钟 360 / 60 = 6度
           所以你要算n分旋转度数，就用 n * 6 得到度数

           一个圆360度，一个圆上60秒。每秒钟 360 / 60 = 6度
           所以你要算n秒旋转度数，就用 n * 6 得到度数
           */


        //    找到元素
        var h = document.getElementById('h');
        var m = document.getElementById('m');
        var s = document.getElementById('s');

        setNow();
        setInterval(setNow,1000);

        function setNow() {
            // 拿到当前时间
            var now = new Date();

            // 找到时分秒
            var hour = now.getHours();
        
            var min = now.getMinutes();

            var sec = now.getSeconds();

            // 秒走了多少，应该把秒转成分，再加一下这个度数
            // 例：5分30秒，其实严格来讲叫5.5分钟，所以应该是5*6 + 0.5*6得到度数
            var hDeg = hour * 30 + min / 60 * 30;
            var mDeg = min * 6 + sec / 60 * 6;
            var sDeg = sec * 6;

            //让div去旋转
            h.style.transform = "rotate(" + hDeg + "deg)";
            m.style.transform = "rotate(" + mDeg + "deg)";
            s.style.transform = "rotate(" + sDeg + "deg)";
        }
    </script>
</body>
</html>
时钟

猜你喜欢

热点阅读
