canvas抖音八卦时钟,轻喷

<!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>

canvas抖音八卦时钟,轻喷相关推荐

罗盘时钟制作代码_抖音八卦时钟手机屏保设置方法！
声明:部分内容来源网络抖音时钟数字罗盘屏保最近十分的火爆, 看上去很有意思也很有趣, 很多人都想要弄. 而抖音时钟数字罗盘屏保如何设置? 今天小编就教大家如何30秒内搞定其实这个非常的简单, 只要 ...
时间轮盘app(抖音数字时钟罗盘)v1.4 安卓版
最近抖音火爆的文字罗盘壁纸可谓是非常的火爆,今天小编特意给大家带来罗盘壁纸应用APP<罗盘时钟>下载地址,用户只需下载改APP就能随时随地更换抖音文字罗盘壁纸,该APP采用了多个文字显示, ...
HTML5七夕情人节表白网页(抖音-罗盘时钟) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音罗盘时钟❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白这是程序员表白系列 ...
抖音文字时钟壁纸html源码,这次要把抖音网红文字时钟设置为壁纸了~
原标题:这次要把抖音网红文字时钟设置为壁纸了~ 本文作者作者:二娃_ https://juejin.im/post/5d52aea86fb9a06ae61aad5b 还记得上篇吗?我们先实现了抖音网 ...
抖音文字时钟壁纸html,网红文字时钟怎么弄抖音网红文字时钟主题壁纸设置教程...
类型:桌面主题大小:54KB语言:中文评分:10.0 标签: 立即下载最近很多小伙伴在抖音上看到了网红文字时钟主题壁纸,很有意思,自己也想要制作这种的,网红文字时钟怎么弄,西西小编为大家带来抖音网 ...
5分钟实现小姐姐喜欢的，抖音文字时钟--下
码个蛋(codeegg)第 724 次推文作者:二娃_ 原文: https://juejin.im/post/5d52aea86fb9a06ae61aad5b 前言源码地址设置动态壁纸-Text ...
抖音超火的罗马时钟html代码,抖音罗马时钟代码实现 · Issue #2 · 424363283/accumulate · GitHub...
抖音超火的罗马时钟 * { margin: 0; padding: 0 } html, body { width: 100%; height: 100%; background-color: #000 ...
抖音罗盘时钟全前端文件，css html js，参考全网
自己建一个项目,项目里面文件只要在src目录下就可以,把这三个文件放在下面就可以了. css源码: *{margin:0;padding:0;background:rgb(111, 245, 93); ...
win10动态壁纸怎么设置_小米手机怎么弄抖音中文数字时钟罗盘屏保设置动态壁纸教程...
[闽南网] 最近抖音上有一个中文数字时钟罗盘非常火爆,这种文字罗盘锁屏特效十分高大上,受到了不少抖友们的青睐.但是,罗盘文字时钟每种手机款型的不一样设置方法也是不同,可能很多米粉也想设置中文数字时钟罗 ...
labview怎么设置中文_小米手机怎么弄抖音中文数字时钟罗盘屏保设置动态壁纸教程...
[闽南网] 最近抖音上有一个中文数字时钟罗盘非常火爆,这种文字罗盘锁屏特效十分高大上,受到了不少抖友们的青睐.但是,罗盘文字时钟每种手机款型的不一样设置方法也是不同,可能很多米粉也想设置中文数字时钟罗 ...

canvas抖音八卦时钟,轻喷

canvas抖音八卦时钟,轻喷相关推荐

最新文章

热门文章