文章 - js 时钟旋转 + 定时器

js 时钟旋转 + 定时器

js 时钟旋转 + 定时器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        #xxxx > div{
            display: inline-block;
            width: 50px;
            height: 50px;
        }
        #cup{
            width: 300px;
            height: 300px;
            position: relative;
            border: 1px solid black;
        }
        #cup #hzhizhen{
            position: absolute;
            left:49%;
            top: 49%;
            width: 25%;
            transform-origin:0px 0px;
            transform:rotateZ(0deg);
            height: 1%;
            background: black;
        }
        #cup #tzhizhen{
            position: absolute;
            left:49%;
            top: 49%;
            width: 35%;
            height: 1%;
            transform-origin:0px 0px;
            transform:rotateZ(0deg);
            background: black;
        }
        #cup #szhizhen{
            position: absolute;
            left:49%;
            top: 49%;
            transform-origin:0px 0px;
            transform:rotateZ(0deg);
            width: 49%;
            height: 1%;
            background: black;
        }
        .h12,.h3,.h6,.h9{
            position: absolute;
        }
        .h12{
            top: 0%;
            left: 49%;
        }
        .h3{
            top: 49%;
            right: 0%;
        }
        .h6{
            left: 49%;
            bottom: 0%;
        }
        .h9{
            top: 49%;
            left: 0%;
        }
    </style>
    <body>
        <div id="xxxx">
            <div id="h"></div>：
            <div id="t"></div>：
            <div id="s"></div>
        </div>

<div id="cup">
            <div id="hzhizhen"></div>
            <div id="tzhizhen"></div>
            <div id="szhizhen"></div>
            <div class="h12">12</div>
            <div class="h3">3</div>
            <div class="h6">6</div>
            <div class="h9">9</div>
        </div>
        <script>
            var api = new API({
                h:"h",
                t:"t",
                s:"s",
                zhizhen:{
                    hzhizhen:"hzhizhen",
                    tzhizhen:"tzhizhen",
                    szhizhen:"szhizhen",
                }
            })

function API(obj){
                this.obj=obj;
                var h=document.getElementById(obj.h);
                var t=document.getElementById(obj.t);
                var s=document.getElementById(obj.s);
                var hzhizhen=document.getElementById(obj.zhizhen.hzhizhen);
                var tzhizhen=document.getElementById(obj.zhizhen.tzhizhen);
                var szhizhen=document.getElementById(obj.zhizhen.szhizhen);

time=function(){
                    var timer=setInterval(function(){
                        var myDate=new Date();
                        //360/12=30
                        h.innerHTML=myDate.getHours();
                        hzhizhen.style.transform="rotateZ("+(30*myDate.getHours()-90)+"deg)";
                        //360/60=6
                        t.innerHTML=myDate.getMinutes();
                        tzhizhen.style.transform="rotateZ("+(6*myDate.getMinutes()-90)+"deg)";
                        //360/60=6
                        s.innerHTML=myDate.getSeconds();
                        szhizhen.style.transform="rotateZ("+(6*myDate.getSeconds()-90)+"deg)";
                        console.log(h.style.transform);
                    },1000);
                }();
            };

</script>
    </body>
</html>