Jquery实现时钟特效

这个特效是我很早之前就想要做的了，可惜一直没有思路，原本以为这个特效是使用HTML5来实现的，但是我今天在早晨上班的路上,无意间就想到了实现的方法，于是到公司之后就按照我所设想的实现思路尝试了一下，没想到真的成功了，仅仅花费了两个小时不到。好的技术是要分享的，接下来我就讲解一下这个时钟特效的实现原理。

源代码：

                   setInterval(function(){//定时器 每隔一秒执行一次
				var date = new Date();//创建Date对象
				var currentMin = date.getMinutes() * 6;//获取当前时间分钟值
				var currentHours = date.getHours() * 30;//获取小时值
				var currerntSec = date.getSeconds() * 6;//获取秒值

				//将获取到的当前时间值赋给元素的rotate。
				$(".secli").css({"transform":"rotate("+currerntSec+"deg)"});
				$(".minuteli").css({"transform":"rotate("+currentMin+"deg)"});
				$(".hourli").css({"transform":"rotate("+currentHours+"deg)"});
			},1000);

特效的实现原理其实超级的简单，就是获取当前时间的 时，分，秒 并将其转换成rotate的值即可。

这个特效的难点就是在时间转换rotate值这一块，

 时间转换成rotate角度解说

 1. 秒值的转换： 
   元素旋转一周需要360度，而一分钟有60秒，所以每一秒元素需要旋转360/60 = 6度。
   即：var currerntSec = date.getSeconds() * 6  分钟值和秒值计算方法相同;
 2. 小时的转换：
   元素旋转一周需要360度，而时钟的最大刻度为12小时，所以每一秒元素需要旋转360/12 = 30度
   即：var currentHours = date.getHours() * 30;

这样就实现了时间的转换，然后将转换后的值赋给指针的rotate值，并每隔一秒执行一次，即可完成时钟特效的编写，是不是很简单  ^_^ 。

在线演示：

http://sipeng.net/yanshi/clock/clock.html

源码下载：

时钟特效源代码下载