<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:200px;
height:200px;
border-radius: %;
border:1px solid #;
position: relative;
margin:5px auto;
text-align: center;
box-shadow: 0px 0px 20px 5px #;
}
div span{
transform-origin: bottom center;
}
.sec{
position: absolute;
top:%;
left:%;
margin-left:-2px;
margin-top:-80px;
height:80px;
width:4px;
background: red;
border-radius: % % ;
}
.min{
position: absolute;
top:%;
left:%;
margin-left:-3px;
margin-top:-60px;
height:60px;
width:6px;
background: #;
border-radius: % % ;
}
.hou{
position: absolute;
top:%;
left:%;
margin-left:-4px;
margin-top:-40px;
height:40px;
width:8px;
background: #;
border-radius: % % ;
}
.cap{
position: absolute;
top:%;
left:%;
margin-left:-6px;
margin-top:-6px;
height:12px;
width:12px;
background: radial-gradient(#ccc,#);
border-radius: %;
}
i b{
position: absolute;
top:12px;
left:-4px;
}
</style>
<script>
window.onload=function(){
var aSpan=document.querySelectorAll('span');
var oBox=document.getElementById('box');
clock();
setInterval(clock,);
for (var i = ; i <; i++) {
var oI=document.createElement('i');
oI.style.width='6px';
if(i%){
oI.style.height='8px';
}else{
oI.innerHTML='<b>'+i/+'</b>';
oI.children[].style.transform='rotate(-'+i*+'deg)';
oI.style.height='16px';
}
oI.style.position='absolute';
oI.style.top='0px';
oI.style.left='100px';
oI.style.background='#000';
oI.style.transform='rotate('+i*+'deg)';
oI.style.transformOrigin='0px 100px';
oBox.appendChild(oI);
}
function clock(){
var oDate=new Date();
var h=oDate.getHours();
var m=oDate.getMinutes();
var s=oDate.getSeconds();
var ms=oDate.getMilliseconds();
aSpan[].style.transform='rotate('+(*(h%)/+m*/)+'deg)';
aSpan[].style.transform='rotate('+(*m/+s*/)+'deg)';
aSpan[].style.transform='rotate('+(*s/+ms*/)+'deg)';
}
};
</script>
</head>
<body>
<div id="box">
<span class="sec"></span>
<span class="min"></span>
<span class="hou"></span>
<p class="cap"></p>
</div>
</body>
</html>