<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Gossip clock </title>
        <style>
            *{margin:0;padding:0}
            #canvas{background-color:#fff;display: block;}
        </style>
    </head>
    <body>
        <canvas id="canvas" ></canvas>
    </body>
    <script src="jquery-3.1.1.min.js"></script>
    <script>
        var
number=[" One "," Two "," Three "," Four "," Five "," Six "," Seven "," Eight "," Nine "," Ten "," eleven "," twelve "," thirteen "," fourteen "," fifteen "," sixteen "," seventeen "," eighteen "," nineteen "," twenty "," twenty-one "," docosa- "," tricosa- "," tetracosa- "," twenty-five "," hexacosa- "," twenty-seven "," twenty-eight "," nonacosa "," thirty "," Thirty-one ",
      
 " thirty two "," Thirty-three "," Thirty-four "," Thirty-five "," Thirty-six "," thirty-seven "," Thirty-eight "," thirty-nine "," forty "," forty-one "," Forty-two "," forty-three "," Forty four "," Forty-five "," forty-six "," forty-seven "," Forty eight "," Forty nine "," fifty "," Fifty-one "," Fifty-two "," Fifty-three "," Fifty-four "," Fifty-five "," Fifty-six "," fifty-seven "," Fifty-eight "," fifty-nine "," Zero "]
        
            var
ri_zong,myDate,n,y,r,z,h,m,s,fun_mouth,fun_ri,fun_zhou,fun_shi,fun_fen,fun_miao
            function gettime(){
                myDate=new Date()
                n=myDate.getFullYear()
                y=myDate.getMonth()+1
                r=myDate.getDate()
                z=myDate.getDay()
                h=myDate.getHours()
                m=myDate.getMinutes()
                s=myDate.getSeconds()
                
                fun_mouth=-myDate.getMonth()
                fun_ri=-myDate.getDate()+1
                fun_zhou=-myDate.getDay()+1
                fun_shi=-myDate.getHours()+1
                fun_fen=-myDate.getMinutes()+1
                fun_miao=-myDate.getSeconds()+1
            }
            gettime()
        if(y==1||y==3||y==5||y==7||y==8||y==10||y==12){
                ri_zong=31
        }else if(y==2){
            if(n%4==0){
                ri_zong=29
            }else{
                ri_zong=28
            }
        }else{
                ri_zong=30
        }
        
        
        // initialization
        const ctx=document.getElementById("canvas").getContext("2d");
        var scr_h=document.documentElement.clientHeight;
        var scr_w=document.documentElement.clientWidth;
        
        $("#canvas").attr("height",scr_h)
        $("#canvas").attr("width",scr_h)
        $("#canvas").css({"margin-left":(scr_w-scr_h)/2+"px"})
        
        ctx.translate(scr_h/2,scr_h/2)
        ctx.font="12px Arial";
        
        // month
        
        function yue(n,x,z){
            if(n==0){
                ctx.font="normal small-caps bold 10px arial";
            }else{
                ctx.font="normal small-caps normal 10px arial ";
            }
            ctx.rotate(z*(360/12)*Math.PI/180);
            ctx.rotate(30*Math.PI/180);
            ctx.fillText("            "+x+" month ",0,0);
            ctx.rotate(-z*(360/12)*Math.PI/180);
        }
        
        
        // day
        function ri(n,x,z){
            if(n==0){
                ctx.font="normal small-caps bold 10px arial";
            }else{
                ctx.font="normal small-caps normal 10px arial ";
            }
            ctx.rotate(z*(360/ri_zong)*Math.PI/180);
            ctx.rotate((360/ri_zong)*Math.PI/180);
            ctx.fillText("                          "+x+" day ",0,0);
            ctx.rotate(-z*(360/ri_zong)*Math.PI/180);
        }
        
        // week
        function zhou(n,x,z){
            if(n==0){
                ctx.font="normal small-caps bold 10px arial";
            }else{
                ctx.font="normal small-caps normal 10px arial ";
            }
            if(x==" Seven "){
                x=" day "
            }
            ctx.rotate(z*(360/7)*Math.PI/180);
            ctx.rotate((360/7)*Math.PI/180);
            ctx.fillText("                                          
"+" week "+x,0,0);
            ctx.rotate(-z*(360/7)*Math.PI/180);
        }
        
        // Time
        function shi(n,x,z){
            if(n==0){
                ctx.font="normal small-caps bold 10px arial";
            }else{
                ctx.font="normal small-caps normal 10px arial ";
            }
            ctx.rotate(z*(360/24)*Math.PI/180);
            ctx.rotate((360/24)*Math.PI/180);
            ctx.fillText("                                                  
      "+x+" spot ",0,0);
            ctx.rotate(-z*(360/24)*Math.PI/180);
        }
        
        
        // branch
        function fen(n,x,z){
            if(n==0){
                ctx.font="normal small-caps bold 10px arial";
            }else{
                ctx.font="normal small-caps normal 10px arial ";
            }
            ctx.rotate(z*(360/60)*Math.PI/180);
            ctx.rotate((360/60)*Math.PI/180);
            ctx.fillText("                                                  
                     "+x+" branch ",0,0);
            ctx.rotate(-z*(360/60)*Math.PI/180);
        }
        
        // second
        function miao(n,x,z){
            if(n==0){
                // ctx.fillStyle="#fff"
                ctx.font="normal small-caps bold 10px arial";
            }else{
                // ctx.fillStyle="#000"
                ctx.font="normal small-caps normal 10px arial ";
            }
            ctx.rotate(z*(360/60)*Math.PI/180);
            ctx.rotate((360/60)*Math.PI/180);
            ctx.fillText("                                                  
                                       "+x+" second ",0,0);
            ctx.rotate(-z*(360/60)*Math.PI/180);
        }
        
        setInterval(function(){
            ctx.clearRect(-scr_h/2,-scr_h/2,scr_h,scr_h)
            gettime()
            
            for(let i=fun_mouth;i<12+fun_mouth;i++){
                yue(i*(-30),number[i-fun_mouth],fun_mouth-1)
            }
            console.log(ri_zong)
            for(let i=fun_ri;i<ri_zong+fun_ri;i++){
                ri(i*(-360/ri_zong),number[i-fun_ri],fun_ri-1)
            }
            for(let i=fun_zhou;i<7+fun_zhou;i++){
                zhou(i*(-360/7),number[i-fun_zhou],fun_zhou-1)
            }
            for(let i=fun_shi;i<24+fun_shi;i++){
                shi(i*(-360/24),number[i-fun_shi],fun_shi-1)
            }
            for(let i=fun_fen;i<60+fun_fen;i++){
                fen(i*(-360/60),number[i-fun_fen],fun_fen-1)
            }
            for(let i=fun_miao;i<60+fun_miao;i++){
                miao(i*(-360/60),number[i-fun_miao],fun_miao-1)
            }
        },1000)
        
        
        
    </script>
</html>

Technology
©2019-2020 Toolsou All rights reserved,
java Four functional interfaces ( a key , simple )os Simple use of module Browser kernel ( understand ) Some East 14 Pay change 16 salary , Sincerity or routine ?HashMap Explain in detail It's unexpected Python Cherry tree (turtle The gorgeous style of Library )html Writing about cherry trees , Writing about cherry trees