<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时钟</title>
<style>
*{
padding：0；
margin：0；
}
html, body {
height: 100%;
background: #9c9;
}
#warp{
width:230px;
height:230px;
margin:50px auto;
}
#clock{
width:200px;
height:200px;
border-radius:115px;
border:15px solid#f96;
background:white;
position:relative;
}
#number div{
width:190px;
height:20px;
position:absolute;
left:10px;
top:90px;
}
#number span{
display:block;
width:20px;
height:20px;
}
.pointer{
position:absolute;
bottom:90px;
transform-origin:50%90%;
-webkit-transform-origin:50% 90%;
}
#houre{
width:5px;
height:60px;
left:98px;
background:black;
}
#minute{
width:3px;
height:70px;
left:99px;
background:gray;
}
#second{
width:1px;
height:80px;
left:100px;
background:red;
}
</style>
</head>
<body>
<divid="warp" >
<divid="clock" >
<divid="number">
<div><span>9</span></div>
<div><span>10</span></div>
<div><span>11</span></div>
<div><span>12</span></div>
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
<div><span>7</span></div>
<div><span>8</span></div>
</div>
<divid="houre" ></div>
<divid="minute" ></div>
<divid="second" ></div>
</div>
</div>
<!--旋转角度原理：
秒针：一圈 360°一共有60秒 每秒6°
分针：一圈360°一圈走60次每次6°每分钟 6°
时针：一圈 360°一共12个表盘没有24小时 每个小时走30°-->
<script>
var oNumber=document.getElementById("number");
varoDiv=oNumber.getElementsByTagName("div");
varoSpan=oNumber.getElementsByTagName("span");
for(vari=0;i<oDiv.length;i++){
oDiv[i].style.WebkitTransform="rotate(" + i * 30 + "deg)";
}
for(varj=0;j<oSpan.length;j++){
oSpan[j].style.WebkitTransform="rotate("+ j * -30 +"deg)";
}
functionColorNumber(){
varoHoure=document.getElementById("houre");
var oMinute=document.getElementById("minute");
varoSecond=document.getElementById("second");
var nowTime=newDate();
varnowHoure=nowTime.getHours();
varnowMinute=nowTime.getMinutes();
var nowSecond=nowTime.getSeconds();
varhoureDeg=(nowMinute/60)*30;
varminuteDeg=(nowSecond/60)*6;
oHoure.style.WebkitTransform="rotate("+ (nowHoure *30+houreDeg) + "deg)";
oMinute.style.WebkitTransform="rotate("+ (nowMinute * 6+minuteDeg) + "deg)";
oSecond.style.WebkitTransform="rotate("+ (nowSecond * 6) +"deg)";
}
ColorNumber();
setInterval(ColorNumber,1000);
</script>
</body>
</html>
效果：
307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
