变换之时钟实现

为了更好的利用学过的知识，扎实一下知识，也方便日后的复习，则需要做一些东西热身热身一下

以下是实现的代码：

<!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/60var hour = date.getHours()+min/60secs.css("transform","rotate("+(30*sec)+"deg)")mins.css("transform","rotate("+(6*min)+"deg)")hours.css("transform","rotate("+(30*hour)+"deg)")}})</script>
</html>