js实现动态罗盘时钟

HTML:

 
 

        
2019年
            

        
        

        

        

        

        

        
    

CSS:

*{margin:0;padding:0}
        .main{
            width: 7.5rem;
            height: 7.5rem;
            background: #999;
            overflow: hidden;
            position: relative;
            font-size: 0.14rem;
            margin: auto;
        }
        .page{
            width: 7.5rem;
            height: 7.5rem;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.3s linear;
        }
        .year{
            width: 4.03rem;
            height: 0.4rem;
            color: #fff;
            text-align: right;
            line-height: 0.4rem;
            margin-top: 3.55rem;
            position: relative;
            overflow: hidden;
        }
        .year::after{
            content:"";
            position: absolute;
            bottom: 0;
            height: 1px;
        }
        .month{
            width: 2rem;
            height: 0.4rem;
            top: 3.55rem;
            left: 2.75rem;
            line-height: 0.40rem;
            position: absolute;
            transition: all 1s linear;
        }
        .date{
            width: 3rem;
            height: 0.40rem;
            top: 3.55rem;
            left: 2.25rem;
            line-height: 0.40rem;
            position: absolute;
            transition: all 1s linear;
        }
        .hour{
            width: 4rem;
            height: 0.40rem;
            top: 3.55rem;
            left: 1.75rem;
            line-height: 0.40rem;
            position: absolute;
            transition: all 1s linear;
        }
        .min{
            width: 5rem;
            height: 0.40rem;
            top: 3.55rem;
            left: 1.25rem;
            line-height: 0.40rem;
            position: absolute;
            transition: all 1s linear;
        }
        .sec{
            width: 6rem;
            height: 0.40rem;
            top: 3.55rem;
            left: 0.75rem;
            line-height: 0.40rem;
            position: absolute;
            transition: transform 1s linear;
        }
        .br{
            position: absolute;
            z-index: 999;
            bottom: 0.06rem;
            right: 0rem;
            height: 1px;
            width: 3.34rem;
            background: #fff;
            transform: translateX(100%);
            transition: all 0.5s linear 0.5s;
        }

JavaScript：

var mday=[31,28,31,30,31,30,31,31,30,31,30, 31];
        var date = new Date();
        var m = Number(date.getMonth()) + 1
        var day = date.getDate();
        var hours = date.getHours();
        var mu = date.getMinutes();
        var s = date.getSeconds();
        var rotateDeg = [0, 0,0,0,0,0];
        var rotateS = [360/12, 360/(mday[m]-1), 360/24, 360/60, 360/60];
        var startDate = [m, day, hours, mu, s];
        var createMonth = function(){
            var mStr = ""
            var r = 360/12;
            for(var i = 0; i < 12; i++){
                mStr+='
'+(i+1)+'月
'
            }
            $(".mpage").append(mStr);
            var aniMonth = function(){
                for(var i = 0; i < 12; i++){
                    $(".month").eq(i).css("transform", "rotate("+rotateS[0]*i+"deg)");  
                }
            }
            setTimeout(function(){ aniMonth(); }, 100);
        }
        createMonth();
        
        
        var createDate = function(){
            var mStr = ""
            var r = 360/(mday[m]-1);
            for(var i = 0; i < (mday[m]-1); i++){
                mStr+='
'+(i+1)+'日
'  //style="transform:rotate('+r*i+'deg)"
            }
            $(".dpage").append(mStr);
            var aniDate = function(){
                for(var i = 0; i < (mday[m]-1); i++){
                    $(".date").eq(i).css("transform", "rotate("+rotateS[1]*i+"deg)");  
                }
            }
            setTimeout(function(){   aniDate(); }, 1100);
        }
        createDate();

        


        var createHours = function(){
            var mStr = ""
            var r = 360/24;
            for(var i = 0; i < 24; i++){
                mStr+='
'+(i)+'时
'
            }
            $(".hpage").append(mStr);
            var aniHours = function(){
                for(var i = 0; i < 24; i++){
                    $(".hour").eq(i).css("transform", "rotate("+rotateS[2]*i+"deg)");  
                }
            }
            setTimeout(function(){  aniHours(); }, 2100);
        }
        createHours();

        var createMiun = function(){
            var mStr = ""
            var r = 360/60;
            for(var i = 0; i < 60; i++){
                mStr+='
'+(i)+'分
' //style="transform:rotate('+r*i+'deg)"
            }
            $(".minpage").append(mStr);
            var aniHours = function(){
                for(var i = 0; i < 60; i++){
                    $(".min").eq(i).css("transform", "rotate("+rotateS[3]*i+"deg)");  
                }
            }
            setTimeout(function(){  aniHours(); }, 3100);
        }
        createMiun();

        var createSec = function(){
            var mStr = ""
            var r = 360/60;
            for(var i = 0; i < 60; i++){
                mStr+='
'+(i)+'s
'
            }
            $(".spage").append(mStr);
            var aniHours = function(){
                for(var i = 0; i < 60; i++){
                    $(".sec").eq(i).css("transform", "rotate("+rotateS[4]*i+"deg)");  
                }
            }
            setTimeout(function(){  aniHours(); }, 4100);
        }
        createSec();
        setTimeout(function(){  startAuto(); }, 5100);
       
        var startAuto = function(){
            rotateDeg[0] = -(m-1) * rotateS[0];
            rotateDeg[1] = -(day-1) * rotateS[1];
            rotateDeg[2] = -hours * rotateS[2];
            rotateDeg[3] = -mu * rotateS[3];
            rotateDeg[4] = -s * rotateS[4];
            for(var i = 0; i < 5; i++){
                $(".page").eq(i).css("transform", "rotate("+rotateDeg[i]+"deg)");
                $(".sec").eq(startDate[4]%60).css("color", "#fff");
                $(".min").eq(startDate[3]%60).css("color", "#fff");
                $(".hour").eq(startDate[2]%24).css("color", "#fff");
                $(".date").eq(startDate[1]%(mday[m]-1)-1).css("color", "#fff");
                $(".month").eq((startDate[0]-1)%12).css("color", "#fff");
            }
            $(".br").css("transform", "translateX(0%)")
            setInterval(function(){
                rotateDeg[4] = rotateDeg[4]-rotateS[4];  //秒
                $(".sec").eq(startDate[4]%60).css("color", "#333");
                startDate[4] +=1;
                $(".sec").eq(startDate[4]%60).css("color", "#fff");
                $(".page").eq(4).css("transform", "rotate("+rotateDeg[4]+"deg)");
                if(rotateDeg[4]%360 == 0 || startDate[4]%60 == 0){   //秒进分
                    rotateDeg[3]=rotateDeg[3]-rotateS[3];
                    $(".min").eq(startDate[3]%60).css("color", "#333");
                    startDate[3] +=1;
                    $(".min").eq(startDate[3]%60).css("color", "#fff");
                    $(".page").eq(3).css("transform", "rotate("+rotateDeg[3]+"deg)");
                    if(rotateDeg[3]%360 == 0 || startDate[3]%60 == 0){   //分进时
                        rotateDeg[2]=rotateDeg[2]-rotateS[2];
                        $(".hour").eq(startDate[2]%24).css("color", "#333");
                        startDate[2] +=1;
                        $(".hour").eq(startDate[2]%24).css("color", "#fff");
                        $(".page").eq(2).css("transform", "rotate("+rotateDeg[2]+"deg)");
                        if(rotateDeg[2]%360 == 0 || startDate[2]%24 == 0){ //时进日
                            rotateDeg[1]=rotateDeg[1]-rotateS[1];
                            $(".date").eq(startDate[1]%(mday[m]-1)).css("color", "#333");
                            startDate[1] +=1;
                            $(".date").eq(startDate[1]%(mday[m]-1)).css("color", "#333");
                            $(".page").eq(1).css("transform", "rotate("+rotateDeg[1]+"deg)");
                            if(rotateDeg[1]%360 == 0 || startDate[1]%(mday[m]-1) == 0){ //日进月
                                rotateDeg[0]=rotateDeg[0]-rotateS[0];
                                $(".month").eq(startDate[0]%12).css("color", "#333");
                                startDate[0] +=1;
                                $(".month").eq(startDate[0]%12).css("color", "#fff");
                                $(".page").eq(0).css("transform", "rotate("+rotateDeg[0]+"deg)");
                            }

                        }
                    }
                }
            }, 1000)
        }
//测试 微信端，隐藏jsrun个人介绍
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {  
                //在微信中打开  
    $("#powered",parent.document).hide();
		$("#exampleTop",parent.document).hide();
}