机械时钟
没有写过机械时钟的时候，觉得这种代起码的有几年经验的老码农才写的出来，当理解了transform-origin 这个属性，然后熟悉dom ,机械时钟跟电子时钟的难度差不多。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding:0;
}
.box{
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom:0;
margin: auto;
border-radius: 50%;
border: 2px solid;
}
ul>li{
width: 2px;
height: 10px;
background-color: #333;
list-style-type: none;
position: absolute;
left:98px ;
transform-origin: center 100px;
}
ul>li:nth-child(5n){
height: 15px;
width: 3px;
}
.center{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom:0;
margin: auto;
width: 15px;
height: 15px;
background-color:green;
border-radius: 50%;
z-index: 1;
}
.h{
height: 30px;
width: 6px;
background-color: red;
position: absolute;
left: 97px;
top: 70px;
transform-origin: center bottom;
}
.m{
height: 50px;
width: 4px;
background-color: green;
position: absolute;
left: 98px;
top: 50px;
transform-origin: center bottom;
}
.s{
height: 70px;
width: 2px;
background-color: #777;
position: absolute;
left: 99px;
top: 30px;
transform-origin: center bottom;
}
</style>
</head>
<body>
<div class="box">
<div class="center"></div>
<div class="h"></div>
<div class="m"></div>
<div class="s"></div>
<ul></ul>
</div>
<script>
for(var i=0;i<60;i++){
var ul=document.querySelector("ul");
var li=document.createElement("li");
ul.appendChild(li);
var str=" li:nth-child("+(i+1)+"){transform: rotate("+(i+1)*6+"deg);}";
var style=document.createElement("style");
style.append(str);
document.head.appendChild(style)
}
start()
function start() {
var date=new Date();
var h=date.getHours();
var m=date.getMinutes();
var s=date.getSeconds();
document.querySelector(".s").style.transform="rotate("+s*6+"deg)";
document.querySelector(".m").style.transform="rotate("+(s/60+m)*6+"deg)";
document.querySelector(".h").style.transform="rotate("+(h+m/60)*30+"deg)"
}
setInterval('start()',1000)
</script>
</body>
</html>
