<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=640,user-scalable=no,target-densitydpi=device-dpi" />
<style>
*{
margin:0;
padding:0;
}
.parents{
width:250px;
height:250px;
background:#000;
-webkit-border-radius:20px;
}
.ab{
position: absolute;
width: 1px;
height: 1px;
border: 0px solid #999;
background: #999;
line-height: 3px;
text-indent: -4px;
font-size: 6px;
}
p.houre{
height:200px;
position:absolute;
top:25px;
left:125px;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAABxCAYAAADlPJLFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPhJREFUeNrsmMEKgkAQhrWDbyAIXT0FnoRA8GrHXqs3CHqNEDp5EgqiQxTdwlvPEEiw/VuzIqGhBp3+gQ90Zz7WndmTtlLKaol6wv5MjqyBQZEiRYoUKVKkSJEiRYoUKVKkSJEiRYoU/yzaDb+CIzAHY3m/gTXYte3ogg3YggTchUTWdM6rqvWOwAUFOIFA1uoEkiukthJTcAFOg2RwpCY14hQ8QPhFMoRSG+nmLPDFIZh1bGgG9ro5E3DuMYmjdrRYDhhjqcUrCHpIwcvBGWM5sN+hOb7UxvVx5B3GkdfH8dMF0HggU+84gBVYyrOSnGfqB1/ypwADAJwYYKUbK5foAAAAAElFTkSuQmCC) 0 29px no-repeat rgba(0,0,0,0);
width:10px;
background-size:100%;
}
p.minutes{
position: absolute;
top:25px;
left:125px;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAACLCAIAAAArqbRdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACBJREFUeNpi/P//PwMYMDHAwChrlDXKGmWNsqjNAggwAC0BBBMOvt0tAAAAAElFTkSuQmCC) 0 4px no-repeat rgba(0,0,0,0);
height:200px;
width:2px;
background-size:100%;
}
p.second{
position: absolute;
top:25px;
left:125px;
background:rgba(0,0,0,0);
height:200px;
width:1px;
}
p.second:before{
content: "";
position: absolute;
top:0;
left:0;
background:#642D0E;
height:100px;
width:1px;
}
</style>
</head>
<body>
<div class="parents">
<p class="houre"></p>
<p class="minutes"></p>
<p class="second"></p>
</div>
<p class="nowtime"></p>
</body>
<script>
(function(){
var a=125,b=125,r=100,sdeg=mdeg=hdeg=0,divs=timer=null;
var second=document.querySelector(".second"),
minute=document.querySelector(".minutes"),
houre=document.querySelector(".houre"),
nowtime=document.querySelector(".nowtime"),
parents=document.querySelector(".parents"),
nowhours=(new Date().getHours()<=12)?new Date().getHours():new Date().getHours()-12,
nowminutes=new Date().getMinutes(),
nowseconds=new Date().getSeconds();
console.log(nowhours+"sss"+nowminutes+"sssss"+nowseconds);
hdeg=nowhours*30;
mdeg=nowminutes*6;
sdeg=nowseconds*6;
clearInterval(timer);
timer=setInterval(function(){
if(sdeg>=360){
sdeg=0;
if(mdeg>360){
mdeg=0;
hdeg+=6;
if(hdeg>=360){
hdeg=0;
}
}
mdeg+=6;
}
sdeg+=6;
second.style.webkitTransform='rotate('+sdeg+'deg)';
minute.style.webkitTransform='rotate('+mdeg+'deg)';
houre.style.webkitTransform='rotate('+hdeg+'deg)';
nowtime.innerText=new Date().toLocaleTimeString();
},1000)
for(var times=0; times<60; times++) {
var hudu = (2*Math.PI/ 360) * 6 * times;
var X = a + Math.sin(hudu) * r;
var Y = b - Math.cos(hudu) * r;
divs=document.createElement("div");
divs.className="ab";
divs.style.cssText='left:'+X+'px;top:'+Y+'px;';
divs.style.webkitTransform='rotate('+(6*times)+'deg)';
if(times%5==0){
divs.innerText=times/5;
divs.style.cssText='background:#2F5FA1;height:8px;border-color:#2F5FA1';
}
if(times==0)divs.innerText=12;
parents.appendChild(divs);
}
})()
</script>
</html>
演示地址:http://sandbox.runjs.cn/show/xloecikn
时间： 2024-11-02 15:16:32