<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>八卦时钟</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=["一","二","三","四","五","六","七","八","九","十","十一","十二","十三","十四","十五","十六","十七","十八","十九","二十","二十一","二十二","二十三","二十四","二十五","二十六","二十七","二十八","二十九","三十","三十一",
      
 "三十二","三十三","三十四","三十五","三十六","三十七","三十八","三十九","四十","四十一","四十二","四十三","四十四","四十五","四十六","四十七","四十八","四十九","五十","五十一","五十二","五十三","五十四","五十五","五十六","五十七","五十八","五十九","零"]
        
            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
        }
        
        
        // 初始化
        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";
        
        // 月
        
        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+"月",0,0);
            ctx.rotate(-z*(360/12)*Math.PI/180);
        }
        
        
        // 日
        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+"日",0,0);
            ctx.rotate(-z*(360/ri_zong)*Math.PI/180);
        }
        
        // 周
        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=="七"){
                x="日"
            }
            ctx.rotate(z*(360/7)*Math.PI/180);
            ctx.rotate((360/7)*Math.PI/180);
            ctx.fillText("                                          
"+"周"+x,0,0);
            ctx.rotate(-z*(360/7)*Math.PI/180);
        }
        
        // 时
        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+"点",0,0);
            ctx.rotate(-z*(360/24)*Math.PI/180);
        }
        
        
        // 分
        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+"分",0,0);
            ctx.rotate(-z*(360/60)*Math.PI/180);
        }
        
        // 秒
        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+"秒",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>

技术
©2019-2020 Toolsou All rights reserved,
(精华)2020年7月15日 微信小程序 组件Component的使用新手玩海思HI3520D开发板(一,升级)Linux 文件名合法性检测关于Bellman-Ford算法的个人理解Android 11正式版发布!华为鸿蒙操作系统有哪些特点和优势?余承东《全场景时代 新体验与新生态》演讲全文(精华)2020年6月26日 C#类库 读取json配置文件帮助类PHP打印输出log11-5 指定位置输出字符串判断当前对象是不是数组的4种方式