CSS和js时钟效果
2020-01-02 本文已影响0人
夏树大笨熊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:200px;
height:200px;
border-radius: 50%;
border:1px solid #000;
position: relative;
margin:5px auto;
text-align: center;
box-shadow: 0px 0px 20px 5px #000;
}
div span{
transform-origin: bottom center;
}
.sec{
position: absolute;
top:50%;
left:50%;
margin-left:-2px;
margin-top:-80px;
height:80px;
width:4px;
background: red;
border-radius: 50% 50% 0 0;
}
.min{
position: absolute;
top:50%;
left:50%;
margin-left:-3px;
margin-top:-60px;
height:60px;
width:6px;
background: #000;
border-radius: 50% 50% 0 0;
}
.hou{
position: absolute;
top:50%;
left:50%;
margin-left:-4px;
margin-top:-40px;
height:40px;
width:8px;
background: #000;
border-radius: 50% 50% 0 0;
}
.cap{
position: absolute;
top:50%;
left:50%;
margin-left:-6px;
margin-top:-6px;
height:12px;
width:12px;
background: radial-gradient(#ccc,#999);
border-radius: 50%;
}
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,30);
for (var i = 0; i <60; i++) {
var oI=document.createElement('i');
oI.style.width='6px';
if(i%5){
oI.style.height='8px';
}else{
oI.innerHTML='<b>'+i/5+'</b>';
oI.children[0].style.transform='rotate(-'+i*6+'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*6+'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[2].style.transform='rotate('+(360*(h%12)/12+m*30/60)+'deg)';
aSpan[1].style.transform='rotate('+(360*m/60+s*6/60)+'deg)';
aSpan[0].style.transform='rotate('+(360*s/60+ms*6/1000)+'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>
解读：
