标签：highlight lang oct div 实现 web var htm document
transform:rotate(1deg)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="clock.css"> <title>Clock</title> </head> <body> <div id="clock"> <div class="pointer" id="hour"></div> <div class="pointer" id="minute"></div> <div class="pointer" id="second"></div> </div> <script> var hourEle = document.getElementById("hour"); var minuteEle = document.getElementById("minute"); var secondEle = document.getElementById("second"); setInterval( function () { var d = new Date(); var hour = d.getHours(); var minute = d.getMinutes(); var second = d.getSeconds(); let hourDeg = (hour%12+minute/60)*30-90; let minuteDeg = (minute+second/60)*6-90; let secondDeg = second*6-90; hourEle.style.transform = "rotate("+hourDeg+"deg)"; minuteEle.style.transform = "rotate("+minuteDeg+"deg)"; secondEle.style.transform = "rotate("+secondDeg+"deg)"; }, 1000 ) </script> </body> </html>
#clock{
position: relative;
width: 100px;
height:100px;
-webkit-border-radius: 50px;
border-radius: 50px;
border: 1px solid grey;
}
.pointer{
transform-origin: left center;
}
#hour{
width: 30px;
height: 4px;
background-color: black;
position: absolute;
top:50%;
left: 50%;
margin-top: -2px;
}
#minute{
width: 40px;
height: 2px;
background-color: blue;
position: absolute;
top:50%;
left: 50%;
margin-top: -1px;
}
#second{
width: 45px;
height: 1px;
background-color: red;
position: absolute;
top:50%;
left: 50%;
}
标签：highlight lang oct div 实现 web var htm document
原文地址：http://www.cnblogs.com/NickCarter/p/6881741.html
