为了更好的利用学过的知识，扎实一下知识，也方便日后的复习，则需要做一些东西热身热身一下
以下是实现的代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; border: 1px solid black; border-radius: 50%; } #list > li{ position: absolute; list-style: none; background: black; left: 99px; top: 0px; width: 2px; height: 8px; transform-origin: center 100px; } #list > li:nth-child(5n+1){ height: 12px; } .licon{ position: absolute; width: 20px; height: 20px; background: pink; border-radius: 50%; left: 90px; top: 90px; } .hour{ width: 6px; height: 30px; background: black; position: absolute; left:96px ; top: 70px; transform-origin: center bottom; } .min{ width: 4px; height: 50px; position: absolute; background: black; left: 98px; top: 50px; transform-origin: center bottom; } .sec{ width: 2px; height: 70px; position: absolute; left: 99px; top: 30px; background: red; transform-origin: center bottom; } </style> </head> <body> <div id="wrap"> <ul id="list"> </ul> <div class="hour"></div> <div class="min"></div> <div class="sec"></div> <div class="licon"></div> </div> </body> <script type="text/javascript" src="js/jquery-1.10.1.js"></script> <script type="text/javascript"> $(function(){ var $listNode = $("#list"); var $headNode = $("head>style"); var hours = $(".hour"); var mins = $(".min"); var secs = $(".sec"); var licons = $(".licon"); for (var i =0 ; i < 60; i++){ $listNode.append("<li></li>") $headNode.append("#list > li:nth-of-type("+(i+1)+"){transform: rotate("+(i*6)+"deg);}") } //这样子提前运行是因为不用打开一秒后再闪退，所以还是这样子比较好，不会影响视觉。 move() setInterval(move,1000) function move(){ console.log('aaa') var date = new Date() var sec = date.getSeconds() var min = date.getMinutes()+sec/60 var hour = date.getHours()+min/60 secs.css("transform","rotate("+(30*sec)+"deg)") mins.css("transform","rotate("+(6*min)+"deg)") hours.css("transform","rotate("+(30*hour)+"deg)") } }) </script> </html>