练习三.2：时钟

自制作时钟图片：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #box{
                width: 200px;
                height: 200px;
                position: relative;
                border-radius: 50%;
                border: 5px solid black;
                margin: 100px auto;
            }
            #kedu{
                width: 200px;
                height: 200px;
                position: absolute;
            }
            #kedu div{
                width: 20px;
                height: 200px;
                position: absolute;
                left: 90px;
            }
            #box span{
                display: block;
                position: absolute;
            }
            /*使用 CSS3 中的 伪元素 为时钟添加实心小圆点，指针都围着这个点转。*/
            #box:after{
              content: '';
              width: 18px;
              height: 18px;
              background: #000;
              border-radius: 50%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);   /* 向左上移动自身的50% */
              z-index: 10;
            }
            #hour{
                width: 8px;
                height: 50px;
                position: absolute;
                background-color: red;
                left: 95px;
                top: 50px;
                /*这个属性可以改变旋转的中心点*/
                transform-origin: bottom center;
            }
            #minute{
                width: 6px;
                height: 70px;
                position: absolute;
                background-color: cyan;
                left: 96px;
                top: 30px;
                /*这个属性可以改变旋转的中心点*/
                transform-origin: bottom center;
            }
            #second{
                width: 4px;
                height: 90px;
                position: absolute;
                background-color: pink;
                left: 97px;
                top: 10px;
                /*这个属性可以改变旋转的中心点*/
                transform-origin: bottom center;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="kedu">
                <div><span>12</span></div>
                <div><span>1</span></div>
                <div><span>2</span></div>
                <div><span>3</span></div>
                <div><span>4</span></div>
                <div><span>5</span></div>
                <div><span>6</span></div>
                <div><span>7</span></div>
                <div><span>8</span></div>
                <div><span>9</span></div>
                <div><span>10</span></div>
                <div><span>11</span></div>
            </div>
            <div id="hour"></div>
            <div id="minute"></div>
            <div id="second"></div>
        </div>
        <script type="text/javascript">
            var keduDivs = document.querySelectorAll("#kedu div");
            //循环控制刻度形变的角度
            for (var i = 0; i < keduDivs.length; i++) {
                //表盘一圈360度，总共有12个刻度，每个刻度之间是360/12=30度
                keduDivs[i].style.transform = "rotate(" + i * 30 + "deg)";
                //解决刻度值显示正向问题，反向转回去就可以了
                keduDivs[i].firstChild.style.transform = "rotate(" + -i * 30 + "deg)";
            }

            //获取时分秒针DIV
            var hourDiv = document.querySelector("#hour");
            var minuteDiv = document.querySelector("#minute");
            var secondDiv = document.querySelector("#second");

            //获取时分秒
            var date = new Date();
            //把小时转换成12进制，方便运算
            var hour = date.getHours() % 12;

            var minute = date.getMinutes();

            var second = date.getSeconds();

            //设置指针
            function setPointers() {
                second++;
                if (second == 60) {
                    second = 0;
                    minute++;
                    if (minute == 60) {
                        minute = 0;
                        hour++;
                        if (hour == 13) {
                            hour = 0;
                        }
                    }
                }

                //一圈360度，一圈60秒，每秒是360/60=6度
                secondDiv.style.transform = "rotate(" + second * 6 + "deg)";
                //一圈360度，一圈60分，每分是360/60=6度
                minuteDiv.style.transform = "rotate(" + minute * 6 + "deg)";
                //一圈360度，一圈12小时，每秒是360/12=30度
                //一小时是30度，一小时是60分钟，一分钟是30/60=0.5度
                hourDiv.style.transform = "rotate(" + (hour * 30 + minute * 0.5) + "deg)";

            }
            setPointers();

            setInterval(function  () {
                setPointers();
            },1000);
        </script>
    </body>
</html>

 

posted on 2018-12-26 09:33  myworldworld  阅读(86)  评论(0)    收藏  举报

导航