<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>clock</title><linktype="text/css"href="css/style.css"rel="stylesheet"/><scripttype="text/javascript">functionisInt(n){returnparseInt(n)=== n;}functionrotate(x, y, angle){varA,R, rad;
rad =(angle ==0?270: angle)* Math.PI/180;A= Math.atan2(y, x)+ rad;R= Math.sqrt(x * x + y * y);return{x: Math.cos(A)*R,y: Math.sin(A)*R};}functionrotateElement(el, deg){
el.style.transform =`rotate(${deg}deg)`;}</script></head><body><divclass="clock"><ulclass="mark"><script>{let i =0;let html ='';while(i <60){let n = i /5%12;
n = n ===0?12: n;let bold =isInt(n);
html +=`<li class="${bold ?' bold':''}" style="transform: translateY(250px) rotate(${i *6}deg);"></li>`;
i++;}
document.write(html);}</script></ul><script>{let angle =30,
x =110,
y =-190,
i =1,
html ='';
html +=`<div class="numbers" style="transform: translate(${x}px, ${y}px);">${i}</div>`;while(i++<12){let pos =rotate(x, y, angle);
x = pos.x;
y = pos.y;
html +=`<div class="numbers" style="transform: translate(${x}px, ${y}px);">${i}</div>`;}
document.write(html);}</script><divclass="time"><divid="date"></div><divid="now"></div><divid="day"></div></div><divclass="hour-hand"id="h"></div><divclass="minute-hand"id="m"></div><divclass="second-hand"id="s"></div><divclass="center"></div></div><script>{letf=(e, i)=>(i !=0&& e <10?'0'+ e : e);setInterval(()=>{let t =newDate();rotateElement(h, t.getHours()*30+ t.getMinutes()/60*30);rotateElement(m, t.getMinutes()*6+ t.getSeconds()/60*6);rotateElement(s, t.getSeconds()*6+ t.getMilliseconds()/1000*6);
date.innerHTML =[t.getFullYear(), t.getMonth()+1, t.getDate()].map(f).join('-');
day.innerHTML ='星期'+'日一二三四五六'[t.getDay()];
now.innerHTML =[t.getHours(), t.getMinutes(), t.getSeconds()].map(f).join(':');},1000/60);}</script></body></html>