1.表盘
2.背景
3.表针（时针、分针、秒针）
4.数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clock</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#clock{
position: relative;
margin: 5% auto;
width: 400px;
height: 400px;
border-radius: 10px;
background: #fff;
transform: rotate(-90deg);
}
.bg{
position: absolute;
left: 50%;
top: 50%;
margin-left: -180px;
margin-top: -180px;
width: 360px;
height: 360px;
border-radius: 50%;
background-image:url(http://fq.wc.lt//up/1528020272.jpg);
transform: rotate(90deg);
}
.point{
position: absolute;
left: 183px;
top: 50%;
margin-left: -14px;
margin-top: -14px;
}
#hour{
margin: 9px 0 0 14px;
width: 80px;
height: 16px;
background: green;
transform-origin: 0 8px;
border-radius: 16px;
}
#minute{
margin: -14px 0 0 14px;
width: 120px;
height: 12px;
background: blue;
transform-origin: 0 6px;
border-radius: 12px;
}
#second{
margin: -9px 0 0 14px;
width: 160px;
height: 6px;
background: #f00;
transform-origin: 0 3px;
border-radius: 6px;
}
#clock .point .circle{
position: absolute;
left: 0;
top: 0;
width: 28px;
height: 28px;
border-radius:50%;
background: #000;
}
@keyframes hour {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
#clock .number{
position: absolute;
font-size: 34px;
width: 50px;
height: 50px;
line-height: 50px;
color: yellow;
text-align: center;
transform: rotate(90deg);
}
</style>
</head>
<body>
<div id="clock">
<div class="bg">
<div class="point">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
<div class="circle"></div>
</div>
</div>
</div>
<script type="text/javascript">
//1.获取时钟位置
var hour = document.getElementById('hour');
var minute = document.getElementById('minute');
var second = document.getElementById('second');
var myClock = document.getElementById('clock');
//2.获取当前时间,把指针放在正确的位置
function clock() {
var date = new Date();
//计算转动角度
var hourDeg = date.getHours() * 360 / 12;
var minuteDeg = date.getMinutes() * 360 / 60;
var secondDeg = date.getSeconds() * 360 / 60;
//设置指针
hour.style.transform = 'rotate('+hourDeg+'deg)';
minute.style.transform = 'rotate('+minuteDeg+'deg)';
second.style.transform = 'rotate('+secondDeg+'deg)';
}
clock();
//3.设置定时器
setInterval(clock,1000);
//4.画时钟数字
var pointX = 200;
var pointY = 200;
var r = 150;
function drawNumber() {
var deg = Math.PI * 2 / 12;
for (var i = 1; i <= 12; i++) {
//每隔角度
var angle = deg * i;
//计算圆上坐标
var x = pointX + r*Math.cos(angle);
var y = pointY + r*Math.sin(angle);
//写入数字
var number = document.createElement('div');
number.className = 'number';
number.innerHTML = i;
number.style.left = x - 25 + 'px';
number.style.top = y - 25 + 'px';
//添加页面
myClock.appendChild(number);
}
}
drawNumber();
</script>
</body>
</html>
效果演示：http://runjs.cn/detail/spbhybel