版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
date对象实例
不多说看代码
* {
padding: 0;
margin: 0;
}
#div {
width: 500px;
height: 500px;
background: #ccc;
position: absolute; //绝对定位
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;//让表盘位于浏览器的中心
border-radius: 50%;//让表盘变成原型
}
#hour {//时针
width: 14px;
height: 180px;
position: absolute;
left: 50%;
top: 80px;
margin-left: -7px;
transform-origin:center 170px;//旋转的中心点
background: black;
z-index: 3;//显示的层级关系，参数越大，越在上面显示
}
#minute {//分针
width: 10px;
height: 200px;
position: absolute;
left: 50%;
top: 60px;
margin-left: -5px;
transform-origin:center 190px;//旋转的中心点
background: yellow;
}
#second {//秒针
width: 6px;
height: 220px;
position: absolute;
left: 50%;
top: 40px;
margin-left: -3px;
transform-origin:center 210px;//旋转的中心点
background: red;
z-index: 2;//显示的层级关系，参数越大，越在上面显示
}
#scale div{//刻度
width: 4px;
height: 20px;
background: burlywood;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
#scale div span{//数字
display: block;
width: 200px;
height: 20px;
line-height: 30px;
text-align: center;
position: absolute;
left: 50%;
margin-left: -100px;
top: 30px;
color: yellow;
font-weight: bold;
}
#scale div:first-child{
transform: rotateZ(0deg) translateY(-230px);
}
#scale div:nth-child(2){
transform: rotateZ(30deg) translateY(-230px);
}
#scale div:nth-child(2) span{
transform: rotateZ(-30deg);
}
#scale div:nth-child(3){
transform: rotateZ(60deg) translateY(-230px);
}
#scale div:nth-child(3) span{
transform: rotateZ(-60deg);
}
#scale div:nth-child(4){
transform: rotateZ(90deg) translateY(-230px);
}
#scale div:nth-child(4) span{
transform: rotateZ(-90deg);
}
#scale div:nth-child(5){
transform: rotateZ(120deg) translateY(-230px);
}
#scale div:nth-child(5) span{
transform: rotateZ(-120deg);
}
#scale div:nth-child(6){
transform: rotateZ(150deg) translateY(-230px);
}
#scale div:nth-child(6) span{
transform: rotateZ(-150deg);
}
#scale div:nth-child(7){
transform: rotateZ(180deg) translateY(-230px);
}
#scale div:nth-child(7) span{
transform: rotateZ(-180deg);
}
#scale div:nth-child(8){
transform: rotateZ(210deg) translateY(-230px);
}
#scale div:nth-child(8) span{
transform: rotateZ(-210deg);
}
#scale div:nth-child(9){
transform: rotateZ(240deg) translateY(-230px);
}
#scale div:nth-child(9) span{
transform: rotateZ(-240deg);
}
#scale div:nth-child(10){
transform: rotateZ(270deg) translateY(-230px);
}
#scale div:nth-child(10) span{
transform: rotateZ(-270deg);
}
#scale div:nth-child(11){
transform: rotateZ(300deg) translateY(-230px);
}
#scale div:nth-child(11) span{
transform: rotateZ(-300deg);
}
#scale div:last-child{
transform: rotateZ(330deg) translateY(-230px);
}
#scale div:last-child span{
transform: rotateZ(-330deg);
}
</style>
</head>
<body>
<div id="div">//表盘
<div id="hour"></div>//时针
<div id="minute"></div>//分针
<div id="second"></div>//秒针
<div id="scale">
<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><span>9</span></div>
<div><span>10</span></div>
<div><span>11</span></div>
</div>
</div>
<script>
function updateTime() {//函数
var hour = document.getElementById('hour');//找到id为hour的标签
var minute = document.getElementById('minute');//找到id为minute的标签
var second = document.getElementById('second');//找到id为second的标签
var date1 = new Date();//创建一个date函数对象，输出的结果为当前系统时间
var hourHand = date1.getHours();//得到当前系统时间的小时
var minuteHand = date1.getMinutes();//得到当前系统时间的分钟
var secondHand = date1.getSeconds();//得到当前系统时间的秒
hDeg = 360 / 12 * hourHand + minuteHand * 30 / 60;//因为得到的小时是一个数值，
//但我们要计算的是，时针旋转的角度，所以我们知道一圈是360度，一圈有12个小时，那么用小时乘以360/12就是当前小时，
//时针应该旋转的度数。另外，在分针在动的时候，其实，时针也是在动的。那么我们还要加上分针影响的部分。
//60分钟=1小时，一小时，时针需要走的度数为360/12=30度，所以1分钟，时针走的度数就为30/60*分针的时间。
mDeg = 360 / 60 * minuteHand + 6 / 60 * secondHand;//与上面同理
sDeg = 360 / 60 * secondHand;
hour.style.transform = 'rotateZ(' + hDeg + 'deg)';//这里的hour为上面定义的变量，
//代表着为id为hour的标签添加一个css样式为rotateZ，hDeg是上面定义的变量，代表着旋转角度
minute.style.transform = 'rotateZ(' + mDeg + 'deg)';//与上面同理
second.style.transform = 'rotateZ(' + sDeg + 'deg)';//与上面同理
}
updateTime()
setInterval(updateTime, 1000)//计时器，每隔1s执行一遍updateTime（）函数 1000后面的单位为毫秒
</script>
运行效果为
