最终效果展示：
设计亮点：
1.可以实时动态显示当前时间与当前日期
2.代码结构简洁、清晰、明了
知识的汇总：
1.HTML5
2.CSS3
3.JavaScript
重难点汇总：
1.各个指针的旋转角度的获取，首先要明确以下概念：
一周为360度、12小时、60分钟、60秒；
公式：一周的度数/一周的时间；
即得出时针每过一小时要旋转30度；
分针每过一分钟要旋转6度；
秒针每过一秒钟要旋转6度；
下面是代码部分：
HTML:
<div id="box">
<div id="h"></div>
<div id="min"></div>
<div id="s"><div class="cen"></div></div>
<div id="data"></div>
</div>
CSS3:
body{
background-color: #aaa;
margin: 0px;
padding: 0px;
}
#box{
width: 400px;
height: 400px;
border-radius: 100%;
background: url(img/4706.jpg_wh860.jpg)0px 0px no-repeat;
background-size: 400px;
position: absolute;
left: 500px;
top: 200px;
}
#h{
width: 100px;
height: 10px;
background-color: red;
position: relative;
top: 195px;
left: 200px;
}
#min{
width: 140px;
height: 10px;
background-color: yellow;
position: relative;
top: 185px;
left: 200px;
}
#s{
width: 180px;
height: 10px;
background-color: blue;
position: relative;
top: 175px;
left: 200px;
}
.cen{
width: 10px;
height: 10px;
background-color: white;
border-radius: 100%;
}
#data{
position: relative;
top: 100px;
left: 150px;
color: red;
font-size: 20px;
}
JavaScript:
function tim(){
var d = new Date(),//获取当前系统时间
year = d.getFullYear(),//得到当前年份
mon = d.getMonth(),//得到当前月份
date = d.getDate(), //得到当前日期
hours = d.getHours(), //得到当前小时
minutes = d.getMinutes(), //得到当前分钟
seconds = d.getSeconds();//得到当前秒
var hou = "";
if(hours>12){
hou = "下午";
}
else{
hou = "上午";
}
document.getElementById("data").innerHTML= year+"年"+mon+"月"+date+"日"+"<br />"+hou;
var n = document.getElementById("s");//获取秒针ID
n.style.transform = "rotate("+(seconds*6-90)+"deg)";//通过当前秒数，得到秒针旋转度数
n.style.transformOrigin = "left";//设置秒针旋转的基点
var i = document.getElementById("min");//获取分针ID
i.style.transform = "rotate("+(minutes*6-90)+"deg)"//通过当前分钟数，得到分针旋转度数
i.style.transformOrigin = "left";//设置分针旋转的基点
var h = document.getElementById("h");//获取时针ID
h.style.transform = "rotate("+((hours*30)+(minutes*0.5)-90)+"deg)"//通过当前小时数，得到时针旋转度数
h.style.transformOrigin = "left";//设置时针旋转的基点
}
setInterval("tim()",1000);