前端如何⽤html编写动态时钟前段时间在⽹上冲浪的时候看到了⼀个挺有意思的动态时钟图⽚，效果图如下:
今天有空整理⼀下结果发现找不到原来的帖⼦了…
附上dalao写的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta chart="UTF-8">
<title>Title</title>
<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{
.wrapper .timebox{
position: absolute;
width: 200px;
height: 200px;
top: 0;
left:0;
border-radius: 100%;
transition: all 0.5s;
}
爱国的图片.
timebox span{
transition: all 0.5s;
float: left;
}
知有儿童挑促织夜深篱落一灯明.wrapper .timebox span{
position: absolute;
left:50%;
top:50%;
头像男生成熟
width: 40px;
height: 18px;
margin-top: -9px;
margin-left: -20px;
text-align: right;
}
员工履历表</style>
</head>
<body>
<div id="wrapper">
<div class="timebox yuebox"id="yueBox"></div>
<div class="timebox riqiBox"id="riqiBox"></div>
<div class="timebox hourbox"id="hourbox"></div>
<div class="timebox minutebox"id="minutebox"></div> <div class="timebox condbox"id="condbox"></div> </div>
<script>
let wrapper = ElementById("wrapper");
let yueBox = ElementById("yueBox");
let riqiBox = ElementById("riqiBox");
let hourbox = ElementById("hourbox");
let minutebox = ElementById("minutebox"); let condbox = ElementById("condbox"); /*
* 找所有的东西标签函数
* */
let findSiblings=function( tag ){
let parent = tag.parentNode;
let childs = parent.children;
let sb =[];
for(let i=0; i <= childs.length-1; i++){
if( childs[i]!==tag){
sb[sb.length]= childs[i];
}
}
return sb ;
};
/*
* 去掉所有兄弟的类
* */
let removeSiblingClass=function( tag ){
电话机简笔画let sb =findSiblings( tag );
for(let i=0; i <= sb.length-1; i++){
sb[i].className ="";
}
};
/*
* 初始化⽉份函数
* */
let initMonth=function(){
for(let i=1; i<=12; i++){
let span = ateElement("span");
span.innerHTML = i+"⽉";
span.innerHTML = i+"⽉";
yueBox.appendChild( span );
}
};
// 初始化⽇期
let initDate=function(){
for(let i=1; i<=31; i++){
let span = ateElement("span"); span.innerHTML = i+"⽇";
riqiBox.appendChild( span );
}
};
// 初始化⼩时，分钟，秒
let initHour=function(){
for(let i=0; i<=23; i++){
let h = i ;
let span = ateElement("span");
if( h<10){
h="0"+h;
}
span.innerHTML = h +"点";
hourbox.appendChild( span );
}
};
let initMinute=function(){
for(let i=0; i<=59; i++){
let f = i ;
let span = ateElement("span");
if( f<10){
f="0"+f;
}
span.innerHTML = f +"分";
minutebox.appendChild( span );
}
};
let initSecond=function(){
for(let i=0; i<=59; i++){
let miao = i ;
let span = ateElement("span");
if( miao<10){
miao="0"+miao;
}
span.innerHTML = miao +"秒";
condbox.appendChild( span );
}
};
// 时间⽂字样式切换函数
let changeTime=function(tag){
tag.className ="on";
removeSiblingClass( tag );
};
/*
* 初始化⽇历函数
* */
let initRili=function(){
initMonth();// 初始化⽉份优美诗
initDate();// 初始化⽇期
initHour();// ⼩时
initMinute();
initSecond();
};
/*
* 展⽰当前时间
* 参数：mydate 时间对象
* */
let showNow=function( mydate ){
let yue = Month();
let riqi = Date();
let hour = Hours();
let minute = Minutes();
let cond = Seconds();
// 时间⽂字样式切换函数
changeTime( yueBox.children[yue]);
changeTime( riqiBox.children[riqi-1]);
changeTime( riqiBox.children[riqi-1]);
changeTime( hourbox.children[hour]);
changeTime( minutebox.children[minute]);
changeTime( condbox.children[cond]);
};
// 展⽰时间圆圈函数
// tag：⽬标
// num：数字数量
// dis：圆圈半径
let textRound=function(tag,num,dis){
let span = tag.children ;
for(let i=0; i<=span.length-1; i++){
span[i].ansform="rotate("+(360/span.length)*i+"deg) translateX("+dis+"px)";
}
};
/*
* 旋转指定“圆圈”指定度数爱德华医生
* */
let rotateTag=function(tag , deg){
ansform ="rotate("+deg+"deg)";
};
let main=function(){
initRili();// 初始化⽇历
tInterval(function(){
let mydate =new Date();
showNow( mydate );// 展⽰当前时间
},1000);
// n秒后，摆出圆形
tTimeout(function(){
wrapper.className ="wrapper";
textRound(yueBox,12,40);
textRound(riqiBox,31,80);
textRound(hourbox,24,120);
textRound(minutebox,60,160);
textRound(condbox,60,200);
tInterval(function(){
let mydate =new Date();
rotateTag( yueBox ,-Month());
rotateTag( riqiBox ,-360/31*(Date()-1));
rotateTag( hourbox ,-360/Hours());
rotateTag( minutebox ,-Minutes());
花枝招展的意思
rotateTag( condbox ,-Seconds());
},1000)
},6000)
};
main();
</script>
</body>
</html>
