canvas炫酷转盘时钟-阿里云开发者社区

canvas炫酷转盘时钟

2023-04-01 78

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： canvas炫酷转盘时钟，拿来即用

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>转盘时钟</title></head><style>html{
background: #000;
color: #666;
font-size: 12px;
overflow:hidden;
    }
    *{
margin: 0;
padding: 0;
    }
span{
display: block;
float: left;
    }
.on{
color: #fff;
    }
.wrapper{
width: 200px;
height: 200px;
position: absolute;
left:50%;
top:50%;
margin-top: -100px;
margin-left: -100px;
    }
.wrapper.timebox{
position: absolute;
width: 200px;
height: 200px;
top: 0;
left:0;
border-radius: 100%;
transition: all0.5s;
    }
.timeboxspan{
transition: all0.5s;
float: left;
    }
.wrapper.timeboxspan{
position: absolute;
left:50%;
top:50%;
width: 40px;
height: 18px;
margin-top: -9px;
margin-left: -20px;
text-align: right;
    }
</style><body><divid="wrapper"><divclass="timebox yuebox"id="yueBox"></div><divclass="timebox riqiBox"id="riqiBox"></div><divclass="timebox hourbox"id="hourbox"></div><divclass="timebox minutebox"id="minutebox"></div><divclass="timebox secondbox"id="secondbox"></div></div><script>letwrapper=document.getElementById("wrapper");
letyueBox=document.getElementById("yueBox");
letriqiBox=document.getElementById("riqiBox");
lethourbox=document.getElementById("hourbox");
letminutebox=document.getElementById("minutebox");
letsecondbox=document.getElementById("secondbox");
/*    * 找所有的东西标签函数    * */letfindSiblings=function( tag ){
letparent=tag.parentNode;
letchilds=parent.children;
letsb= [];
for(leti=0 ; i<=childs.length-1 ; i++){
if( childs[i]!==tag){
sb[sb.length] =childs[i];
            }
        }
returnsb ;
    };
/*    * 去掉所有兄弟的类    * */letremoveSiblingClass=function( tag ){
letsb=findSiblings( tag );
for(leti=0 ;  i<=sb.length-1 ; i++){
sb[i].className="";
        }
    };
/*    * 初始化月份函数    * */letinitMonth=function(){
for(leti=1; i<=12; i++){
letspan=document.createElement("span");
span.innerHTML=i+"月";
yueBox.appendChild( span );
        }
    };
// 初始化日期letinitDate=function(){
for(leti=1; i<=31; i++){
letspan=document.createElement("span");
span.innerHTML=i+"日";
riqiBox.appendChild( span );
        }
    };
// 初始化小时，分钟，秒letinitHour=function(){
for(leti=0; i<=23; i++){
leth=i ;
letspan=document.createElement("span");
if( h<10){
h="0"+h;
            }
span.innerHTML=h+"点";
hourbox.appendChild( span );
        }
    };
letinitMinute=function(){
for(leti=0; i<=59; i++){
letf=i ;
letspan=document.createElement("span");
if( f<10){
f="0"+f;
            }
span.innerHTML=f+"分";
minutebox.appendChild( span );
        }
    };
letinitSecond=function(){
for(leti=0; i<=59; i++){
letmiao=i ;
letspan=document.createElement("span");
if( miao<10){
miao="0"+miao;
            }
span.innerHTML=miao+"秒";
secondbox.appendChild( span );
        }
    };
// 时间文字样式切换函数letchangeTime=function(tag){
tag.className="on";
removeSiblingClass( tag );
    };
/*    * 初始化日历函数    * */letinitRili=function(){
initMonth(); // 初始化月份initDate(); // 初始化日期initHour(); // 小时initMinute();
initSecond();
    };
/*    * 展示当前时间    * 参数：mydate 时间对象    * */letshowNow=function( mydate ){
letyue=mydate.getMonth() ;
letriqi=mydate.getDate();
lethour=mydate.getHours()  ;
letminute=mydate.getMinutes();
letsecond=mydate.getSeconds();
// 时间文字样式切换函数changeTime( yueBox.children[yue] );
changeTime( riqiBox.children[riqi-1] );
changeTime( hourbox.children[hour] );
changeTime( minutebox.children[minute] );
changeTime( secondbox.children[second] );
    };
// 展示时间圆圈函数// tag：目标// num：数字数量// dis：圆圈半径lettextRound=function(tag,num,dis){
letspan=tag.children ;
for(leti=0 ; i<=span.length-1; i++){
span[i].style.transform="rotate("+ (360/span.length)*i+"deg)  translateX("+dis+"px)" ;
        }
    };
/*    * 旋转指定“圆圈”指定度数    * */letrotateTag=function(tag , deg){
tag.style.transform="rotate("+deg+"deg)";
    };
letmain=function(){
initRili(); // 初始化日历setInterval(function(){
letmydate=newDate();
showNow( mydate ); // 展示当前时间        },1000);
//  n秒后，摆出圆形setTimeout(function(){
wrapper.className="wrapper";
textRound(yueBox,12,40);
textRound(riqiBox,31,80);
textRound(hourbox,24,120);
textRound(minutebox,60,160);
textRound(secondbox,60,200);
setInterval(function(){
letmydate=newDate();
rotateTag( yueBox , -30*mydate.getMonth());
rotateTag( riqiBox , -360/31*(mydate.getDate()-1) );
rotateTag( hourbox , -360/24*mydate.getHours());
rotateTag( minutebox , -6*mydate.getMinutes());
rotateTag( secondbox , -6*mydate.getSeconds());
            },1000)
        },0)
    };
main();
</script></body></html>

canvas炫酷转盘时钟

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

canvas炫酷转盘时钟

热门文章

最新文章

相关电子书