使用jQuery实现时钟的效果

要用jQuery实现时钟的效果首先要给它布局。

用一个div来装所要写的内容，再给这个div一个类为box，再给这个box设置样式让他居中设置它的边框并且设置它的border-radius为百分之百，他就是一个圆形了。又因为时钟是有十二个数字，所以我们用六个div来把他们分成六个组，我们再在每个div中写两个span标签，在span标签中放置相对的点数，我们现在打出来的效果是每个div独占一行，我们想要更好的控制这些div的话，首先在box这个类上给它一个相对定位，再给这六个div一个绝对定位，这样我们就可以让他们重叠。我们再在这六个div上给一个style属性，设置一下transform属性让它的值为rotate()，让第一个div旋转90度，第二个旋转负60度，第三个旋转负30度，第四个不旋转，第五个旋转30度，第六个旋转60度，这样他们就形成了一个圆。但是我们只旋转div的话它里面的数字也会随之改变，所以我们还要给两个span标签设置transform属性让每个span标签旋转的度数与div旋转的方向相反，这样数字就正了；时钟嘛，当然不能没有指针了，所以我们还要在box中加三个div，分别给他们一个类为，shi，fen，miao。再给他们一个绝对定位 ，让他们处于时钟的正中间，我还还得设置一下他们的旋转点，transform-origin:bottom;让他们的旋转点在底部，这样我们的布局也就完成了，如果想要时钟更好看的话也可以加一点自己的想法。接下来我们用jQuery让我们的时钟动起来。

我们先写一个简写的ready事件，但是我们的方法不写在里面，我们写一个封装函数名字为aa()，等下写完再在简写的ready事件中调用就好了，现在我们就到这个封装函数里面写我们所要实现效果的代码。

1.我们先声明一个变量date来获取一下当前的时间，所以我们要用new来获取一下Date()这个方法，因为我们只需要获取它的小时，分钟和秒，所以我们要声明三个变量分别为shi，fen，miao，

var shi = date.getHours(); getHours()这个方法是获取小时

var fen = date.getMinutes(); getMinutes()这个方法是获取分钟

var miao = date.getSeconds()； getSeconds()这个方法是获取秒数。这样我们获取到了它的小时，分钟和秒。

2.我们要计算一下小时和分钟在秒钟行走时他们旋转的度数，

newshi = (fen / 60) * 30;这句代码的意思是用现在的分钟除以六十分钟再乘以30度

newfen = (miao / 60) * 6;这句代码的意思是用现在的秒数除以六十秒数再乘以6度

$(".shi").css("transform","rotate ("+(shi * 30 +newshi)+"deg)");

$(".fen").css("transform", "rotate("+(fen * 6 + newfen )+"deg)");

$(".miao").css("transform", "rotate("+(miao * 6 )+ "deg)");

这三句代码的意思是给时分秒设置transform的样式，让他们旋转的度数与真的时钟相等，写到这这个也就写完了。最后在简写的ready事件调用就好了，但是这也只是能显示不能自己动起来，所以我们要写一个无限计时器，让他每隔1000毫秒调用一下这个函数，这样就大功告成了。无动态效果如下，若想要要动画效果请自己打一遍谢谢：