<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
.box{
width:300px;
height:300px;
border-radius:150px;
background:#fff;
border:5px solid #000;
position: relative;
margin:50px auto;
}
.hour{
width:6px;
height:80px;
background:#000;
position: absolute;
top:70px;
left:147px;
transform-origin:bottom center;
}
.minute{
width:4px;
height:120px;
position: absolute;
background:#000;
top:30px;
left:148px;
transform-origin:bottom center;
}
.second{
width:2px;
position: absolute;
height:120px;
background:red;
top:30px;
left:149px;
transform-origin:bottom center;
}
.center{
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
margin: auto;
width:10px;
height:10px;
background:#000;
border-radius: 5px;
z-index: 1;
}
.box ul li{
position:absolute;
width:2px;
height:10px;
background:#000;
list-style: none;
left:0;
top:0;
right:0;
bottom:0;
margin: auto;
}
.box ul li:nth-child(5n+1){
width:4px;
height:15px;
}
</style>
</head>
<body>
<div class="box">
<div class="center"></div>
<div class="hour" id="hour"></div>
<div class="minute" id="minute"></div>
<div class="second" id="second"></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
function time(){
var myDate = new Date();
var h = myDate.getHours() > 11 ? myDate.getHours() - 12 : myDate.getHours();
var m = myDate.getMinutes();
var s = myDate.getSeconds();
document.getElementById("hour").setAttribute("style","transform: rotate(" + (h*30 + (m*6)/360*30) + "deg)");
document.getElementById("minute").setAttribute("style","transform: rotate(" + (m*6 + (s*6)/360*6) + "deg)");
document.getElementById("second").setAttribute("style","transform: rotate(" + s*6 + "deg)");
}
time();
for(var i = 0; i < 60; i++){
document.getElementsByTagName("li")[i].setAttribute("style","transform: rotate(" + i*6 + "deg) translateY(145px)");
}
setInterval(function(){
time();
},1000)
</script>
</body>
</html>
js原生钟表（属性只支持的谷歌）
原文地址：http://www.cnblogs.com/mr-shen1234/p/7598012.html