Fork me on GitHub

JS小案例--简单时钟

JS小案例--简单时钟

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 200px;
            height: 200px;
            background: #fff;
            position: relative;
            left: 0;
            right: 0;
            margin: auto;
            border-radius: 50%;
            /* perspective: 99px;
            transform-style: preserve-3d; */
        }

        #box div {
            width: 200px;
            height: 5px;
            position: absolute;
            top: 100px;
            background: #000;

        }

        .list1 {
            transform: rotate(90deg);
        }

        .list2 {
            transform: rotate(60deg);
        }

        .list3 {
            transform: rotate(30deg);
        }

        .list4 {
            transform: rotate(120deg);
        }

        .list5 {
            transform: rotate(150deg);
        }

        #box .list7 {
            background: #fff;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            top: 10px;
            left: 10px;
        }

        #box .list8 {
            background: red;
            width: 5px;
            height: 80px;
            top: 20px;
            left: 97px;
            transform: rotate(90deg);
            transform-origin: 50% bottom;
        }

        #box .list9 {
            background: blue;
            width: 5px;
            height: 70px;
            top: 30px;
            left: 97px;
            transform-origin: 50% bottom;
        }

        #box .list10 {
            background: pink;
            width: 5px;
            height: 60px;
            top: 40px;
            left: 97px;
            transform-origin: 50% bottom;
        }
    </style>
</head>

<body bgcolor="#000">
    <div id="box">
        <div class="list1"></div>
        <div class="list2"></div>
        <div class="list3"></div>
        <div class="list4"></div>
        <div class="list5"></div>
        <div class="list6"></div>
        <div class="list7"></div>
        <div class="list8 list"></div>
        <div class="list9 list"></div>
        <div class="list10 list"></div>
    </div>
</body>
<script>
    (function () {
        var list = document.getElementsByClassName('list');
        var speed = 6;
        function show() {
            var timer = new Date;
            var hour = timer.getHours();
            var minute = timer.getMinutes();
            var miao = timer.getSeconds();
            console.log(hour, minute, miao);
            list[0].style = 'transform: rotate(' + miao * speed + 'deg);';
            list[1].style = 'transform: rotate(' + minute * speed + 'deg);';
            list[2].style = 'transform: rotate(' + (hour * 30 + 30 * (minute / 60)) + 'deg);';
            console.log(hour * speed);
        }
        setInterval(show, 1000);
    })();
</script>
</html>

 

posted @ 2019-08-28 21:24  幽幽木云  阅读(410)  评论(0)    收藏  举报