之前在网上看了一些使用js写的时钟，但感觉实现的方法有点麻烦，所以就自己重新写了一个例子，样子有点丑，但方法比较简单，大家就凑合看吧
其中采用的主要方法是原生js里面的Data（时期）对象，以及它的.getSeconds()、.getMinutes()、.getHours()以及css3之中关于旋转部分的内容，以下是所写的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translate</title>
<style>
* {
margin: 0;
padding: 0;
}
.biao {
200px;
height: 200px;
margin: 0 auto;
border: 5px solid #000;
border-radius: 50%;
position: relative;
}
ul {
list-style: none;
position: relative;
}
li {
3px;
height: 10px;
background: #000;
position: absolute;
}
.li1 {
left: 99px;
top: 0px;
}
.li2 {
left: 147px;
top: 12px;
transform: rotate(30deg);
}
.li3 {
left: 182px;
top: 49px;
transform: rotate(60deg);
}
.li4 {
left: 195px;
top: 97px;
transform: rotate(90deg);
}
.li5 {
left: 182px;
top: 143px;
transform: rotate(120deg);
}
.li6 {
left: 147px;
top: 178px;
transform: rotate(150deg);
}
.li7 {
left: 99px;
top: 192px;
transform: rotate(180deg);
}
.li8 {
left: 49px;
top: 178px;
transform: rotate(210deg);
}
.li9 {
left: 13px;
top: 143px;
transform: rotate(240deg);
}
.li10 {
left: 1px;
top: 97px;
transform: rotate(270deg);
}
.li11 {
left: 13px;
top: 49px;
transform: rotate(300deg);
}
.li12 {
left: 49px;
top: 12px;
transform: rotate(330deg);
}
.zx {
position: absolute;
10px;
height: 10px;
border-radius: 50%;
left: 95px;
top: 95px;
background: #f00;
z-index: 10;
}
.zo {
position: absolute;
transform-origin: 50% bottom;
}
.miao {
3px;
height: 80px;
left: 99px;
top: 20px;
background: #f00;
z-index: 8;
}
.fen {
7px;
height: 60px;
left: 97px;
top: 40px;
background: #0f0;
z-index: 5;
}
.shi {
11px;
height: 40px;
left: 95px;
top: 60px;
background: #00f;
z-index: 2;
}
.text {
position: absolute;
font-size: 30px;
}
.text1 {
top: 18px;
left: 93px;
}
.text2 {
top: 86px;
left: 165px;
}
.text3 {
top: 150px;
left: 93px;
}
.text4 {
top: 86px;
left: 25px;
}
</style>
</head>
<body>
<div class="biao">
<ul>
<li class="li1"></li>
<li class="li2"></li>
<li class="li3"></li>
<li class="li4"></li>
<li class="li5"></li>
<li class="li6"></li>
<li class="li7"></li>
<li class="li8"></li>
<li class="li9"></li>
<li class="li10"></li>
<li class="li11"></li>
<li class="li12"></li>
</ul>
<div class="text text1">0</div>
<div class="text text2">3</div>
<div class="text text3">6</div>
<div class="text text4">9</div>
<div class="zx"></div>
<div class="zo shi" id="shi"></div>
<div class="zo fen" id="fen"></div>
<div class="zo miao" id="miao"></div>
</div>
<script>
var shi = document.getElementById("shi");
var fen = document.getElementById("fen");
var miao = document.getElementById("miao");
var interval = setInterval(function(){
var now = new Date();
var s = now.getSeconds();
var f = now.getMinutes();
var h = now.getHours();
miao.style.transform = "rotate("+s/60*360+"deg)";
fen.style.transform = "rotate("+f/60*360+"deg)"
shi.style.transform = "rotate("+h/24*360+"deg)"
},1000);
</script>
</body>
</html>