使用css3属性和js实现一格简单的时钟demo
DEMO
[code lang=”js”]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>clock</title>
<style>
*{ margin:0; padding:0;}
.clock{width:400px; height:400px; background:#F66; border-radius:50%; margin:100px auto;}
.time-box{width:360px; height:360px; background:#fff; border-radius:50%; position:relative; top:20px; left:20px;}
.time-box span{ font-size:36px; position:absolute;}
.hour-1{ top:45px; right:80px; transform:translate(-50%,-50%);}
.hour-2{ top:110px; right:25px; transform:translate(-50%,-50%);}
.hour-3{ right:5px; top:180px;transform:translate(0,-50%);}
.hour-4{ right:25px; bottom:60px;transform:translate(-50%,-50%);}
.hour-5{ right:80px; bottom:0px;transform:translate(-50%,-50%);}
.hour-6{ bottom:5px; left:180px;transform:translate(-50%,0);}
.hour-7{ left:100px; bottom:0px;transform:translate(-50%,-50%);}
.hour-8{ left:40px; bottom:60px;transform:translate(-50%,-50%);}
.hour-9{left:5px; top:180px;transform:translate(0,-50%);}
.hour-10{ top:110px; left:50px; transform:translate(-50%,-50%);}
.hour-11{top:45px; left:100px; transform:translate(-50%,-50%);}
.hour-12{ left:180px; top:5px; transform:translate(-50%,0);}
.center{width:10px; height:10px; background:#000; border-radius:50%; position:absolute; left:50%; top:50%;transform:translate(-50%,-50%);}
.second-pointer{width:2px; height:150px; background:#F00; position:absolute; bottom:160px; left:179px;transform-origin:50% 130px;transform: rotate(30deg); z-index:999; }
.min-pointer{width:4px; height:100px; background:#000; position:absolute;left:178px; bottom:180px;transform:translate(-50%,-5px);transform-origin:50% 100%;transform: rotate(0deg); z-index:998; }
.hour-pointer{width:8px; height:60px; background:#000; position:absolute; bottom:180px; left:176px;transform:translate(-50%,-5px);transform-origin:50% 100%;transform: rotate(60deg); z-index:997;}
</style>
</head>
<body>
<div class="clock">
<div class="time-box">
<span class="hour-1">1</span>
<span class="hour-2">2</span>
<span class="hour-3">3</span>
<span class="hour-4">4</span>
<span class="hour-5">5</span>
<span class="hour-6">6</span>
<span class="hour-7">7</span>
<span class="hour-8">8</span>
<span class="hour-9">9</span>
<span class="hour-10">10</span>
<span class="hour-11">11</span>
<span class="hour-12">12</span>
<div class="center"></div>
<div class="second-pointer" id="se-point" style="transform: rotate(330deg);"></div>
<div class="min-pointer" id="m-point"></div>
<div class="hour-pointer" id="h-point"></div>
</div>
</div>
<script>
window.onload = function(){
getse();
}
function getse(){ //执行主函数秒针移动
var se = setInterval(function(){
pointmove("se-point");
},1000);
}
var today=new Date(),
h=today.getHours(),
m=today.getMinutes(),
s=today.getSeconds();
var se_point = document.getElementById(‘se-point’);
se_point.style.transform = "rotate("+s*6+"deg)";
var m_point = document.getElementById(‘m-point’);
m_point.style.transform = "rotate("+m*6+"deg)";
var h_point = document.getElementById(‘h-point’);
h=h%12;
var hour = parseInt((m*6)/72);
//alert(hour);
h_point.style.transform = "rotate("+(h*30+hour*6)+"deg)"; //获取当前时间，换算成对应指针的角度
//alert(h)
function pointmove(name){ //秒针走动，判断分针和十针的状态
var se_point = document.getElementById(name);
var se_rot = se_point.style.transform,
se_now = null,
//alert(yl);
se_array = new Array;
se_array = se_rot.split(‘(‘);
se_now = parseInt(se_array[1]);
se_now+=6;
if(se_now==360){ //如果秒针转一圈，分针跳动一格
se_now = 0;
m+=1;
var minite = m*6;
m_point.style.transform = "rotate("+minite+"deg)";
if(minite==360){
minite=0;
h+=1;
h_point.style.transform = "rotate("+h*30+"deg)";
}else if(minite%72==0){ //如果分针转动72度，时针跳动一格
var h_rot = h_point.style.transform;
h_array = new Array;
h_array = h_rot.split(‘(‘);
h_now = parseInt(h_array[1]);
//alert(h_now)
h_now+=6;
h_point.style.transform = "rotate("+h_now+"deg)";
}
}
se_point.style.transform = "rotate("+se_now+"deg)";
//console.log(se_now);
}
</script>
</body>
</html>
[/code]
原理：每隔一秒钟让秒针转动6°，然后对状态进行判断，当秒针转动360°时分针转动一格（即6°），同时秒针角度置零。分针也是同理，不过时针是12进制的，所以角度为30°一格，单分针转动72°时，时针转动一小各（6°）。