<!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,
Keras Summary of training data loading Fiddler Simulate request sending and modifying response data Result Encapsulation of return result information python obtain excel A column or row of data python primitive -- lock Lock( Essence )2020 year 8 month 9 day C# Basic knowledge reflex Android 11 Official release !css Basics 2:flex Multi row layout with gaps C Language confession practice small program ( Suitable for beginners )( Essence )2020 year 7 month 15 day Wechat applet import and include difference