Jquery实现时钟特效

2015-4-18 12:37:18 人评论 次浏览 分类:过度特效

这个特效是我很早之前就想要做的了,可惜一直没有思路,原本以为这个特效是使用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

源码下载:

时钟特效源代码下载


共有访客发表了评论 网友评论

验证码: 看不清楚?