源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML+CSS+JS 八卦盘时钟</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:4px;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: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 monthbox" id="monthBox"></div>
<div class="timebox dateBox" id="dateBox"></div>
<div class="timebox hourbox" id="hourbox"></div>
<div class="timebox minutebox" id="minutebox"></div>
<div class="timebox secondbox" id="secondbox"></div>
</div>
<script>
let wrapper=document.getElementById("wrapper");
let monthBox=document.getElementById("monthBox");
let dateBox=document.getElementById("dateBox");
let hourbox=document.getElementById("hourbox");
let minutebox=document.getElementById("minutebox");
let secondbox=document.getElementById("secondbox");
let findSiblings=(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=(tag)=>{
let sb=findSiblings(tag);
for (let i=0; i<=sb.length-1; i++) {
sb[i].className=""
}
};
let initMonth=()=>{
for (let i=1; i<=12; i++) {
let span=document.createElement("span");
span.innerHTML=i+"月";
monthBox.appendChild(span)
}
};
let initDate=()=>{
for (let i=1; i<=31; i++) {
let span=document.createElement("span");
span.innerHTML=i+"日";
dateBox.appendChild(span)
}
};
let initHour=()=>{
for (let i=0; i<=23; i++) {
let h=i;
let span=document.createElement("span");
if (h<10) {
h="0"+h
}
span.innerHTML=h+"点";
hourbox.appendChild(span)
}
};
let initMinute=()=>{
for (let i=0; i<=59; i++) {
let m=i;
let span=document.createElement("span");
if (m<10) {
m="0"+m
}
span.innerHTML=m+"分";
minutebox.appendChild(span)
}
};
let initSecond=()=>{
for (let i=0; i<=59; i++) {
let s=i;
let span=document.createElement("span");
if (s<10) {
s="0"+s
}
span.innerHTML=s+"秒";
secondbox.appendChild(span)
}
};
let changeTime=(tag)=>{
tag.className="on";
removeSiblingClass(tag)
};
let initRili=()=>{
initMonth();
initDate();
initHour();
initMinute();
initSecond()
};
let showNow=(mydate)=>{
let month=mydate.getMonth();
let date=mydate.getDate();
let hour=mydate.getHours();
let minute=mydate.getMinutes();
let second=mydate.getSeconds();
changeTime(monthBox.children[month]);
changeTime(dateBox.children[date-1]);
changeTime(hourbox.children[hour]);
changeTime(minutebox.children[minute]);
changeTime(secondbox.children[second])
};
let textRound=(tag,num,dis)=>{
let span=tag.children;
for (let i=0; i<=span.length-1; i++) {
span[i].style.transform="rotate("+(360/span.length)*i+"deg) translateX("+dis+"px)"
}
};
let rotateTag=(tag,deg)=>{
tag.style.transform="rotate("+deg+"deg)"
};
let timeRun=()=>{
initRili();
setInterval(()=>{
let mydate=new Date();
showNow(mydate)
},1000);
setTimeout(()=>{
wrapper.className="wrapper";
textRound(monthBox,12,40);
textRound(dateBox,31,80);
textRound(hourbox,24,120);
textRound(minutebox,60,160);
textRound(secondbox,60,200);
setInterval(()=>{
let mydate=new Date();
rotateTag(monthBox,-30*mydate.getMonth());
rotateTag(dateBox,-360/31*(mydate.getDate()-1));
rotateTag(hourbox,-360/24*mydate.getHours());
rotateTag(minutebox,-6*mydate.getMinutes());
rotateTag(secondbox,-6*mydate.getSeconds())
},1000)
},0)
};
timeRun();
</script>
</body>
</html>
