如何利用CSS3和jQuery制作一个漂亮的动态时钟

本文翻译自OldscholclockwithCSS3andjquery，主要讲述了如何利用CSS3和jquery制作一个美丽的动态时钟。Hi，大家好，我叫TobyPitman。chris邀请我写一篇关于我最近在论坛上发布的一些实验成果的文章，所以当我在Webkitblog和sawanarticle上看一些新的CSS3动画时，一个rotate属性深深吸引了我的注意，于是我开始写这篇文章。我在想什么可以在网页上旋转（GIF动画图片似乎可以），所以我有一个想法——是的，时钟不能旋转吗！开始！CSS3Transform:rotateTransform:rotate是CSS3的一个新特征，它可以让你...当然是实现一些旋转的东西。Transform还可以让你在网页上缩放、倾斜和移动对象。而以上这些都可以通过Transition属性来实现动画效果。听起来熟悉吗？是的，当然，和以前一样，我们还是会结合jquery来实现页面上元素的动画效果。因为使用jquery可以方便地操作CSS，从而获得动画效果。联想一下a:hover效果，你会对如何实现这个例子产生一些想法。它远没有jquery和mootols那么强大，但它足以做一些很酷的事情。请注意：此时钟例只能在Firefox3.1.1运行 、Safari3 在Chrome浏览器上。首先，我们需要准备一些图片作为时钟的图形界面。在这里，我们使用一张钟盘图片和三张指针图片，其中我们使用photoshop切割的600个运动指针×30张图片，并垂直放置。然后利用rotate属性使其绕中心点旋转。当然，指针使用透明的PNG格式图片。HTML标记此时钟的HTML标记非常简单，只使用UL列表，每个列表项（li）分别对应三个运动指针，并分配相应的id，代码如下：HTML标记此时钟的HTML标记非常简单，只使用UL列表，每个列表项（li）分别对应三个运动指针，并分配相应的id，代码如下：CSS代码复制代码#clock{position:relative;width:600px;height:600px;margin:20pxauto0auto0;background:url(clockface.jpg);list-style:none;}#sec,#min,#hour{position:absolute;width:30px;height:600px;top:0px;left:285px;}#sec{background:url(sechand.png);z-index:3;}#min{background:url(minhand.png);z-index:2;}#hour{background:url(hourhand.png);z-index:1;}CSS代码的复制也很简单，因为三个运动指针尺寸相同，从同一位置开始运动，我们把它们的代码写在一起，以简化代码。为了实现时钟内指针的绝对定位（absolutelyposition）我们将ul设置为相对定位（relativeposition）。为了实现时钟内指针的绝对定位（absolutelyposition）我们将ul设置为相对定位（relativeposition）。下面我们的jquery就要上场了。在这里，Javascript主要完成以下工作：获取当前时间计算和添加每个元素的CSS风格（旋转角度）定期设置CSS风格以获取时间。您可能会将PHP中的时间和日期等同于PHP，一开始，我的第一个想法是使用PHP，然而，后来我发现javascript中也有构造日期和时间的功能函数。需要注意的是，javascript获得的是本地时间，而不是服务器时间。首先，我将使用Date()函数获取日期信息，并将其赋予变量，我们可以通过Getseconds()，GetMinutes()或GetHours()获取三个指针的信息，如下代码：varseconds=newDate().getSeconds();上述代码将返回0到59的数字，并将其分配给seconds变量。接下来，我将计算每个指针的角度。接下来，我将计算每个指针的角度。我们将每周分为60等分，所以只要360/60，我们就会得到每个6，这意味着指针每秒或每分钟都会向前移动6度。将计算结果保存到另一个变量中，代码如下：varsdegree=seconds*6;时针的情况有点不同，因为每个周期是12等分，所以每小时针的前进角度是30度:360/12=30。在这种情况下，如果时针按这个增量运动，那就简单了，但并没有那么简单。它应该根据分针的值移动一小段距离，比如3:如果是30，时针会在3和4之间，但是我们该怎么办呢？请参见以下代码：varhdegree=hours*30 (mins/2);基本上，我们需要将分钟数除以2的值添加到hour后面，该值在0.5到29.5之间(rotate属性支持浮点小值)。例如，2.40将得到：2*30=60degress 40/2=20degreeseress----------------------hdegree=以下是CSSSS3rotate的CSS样式代码：#sec{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);}在这里，我们用jQuery动态添加上述样式：$("#sec").css({"-moz-transform":"rotate(45deg)","-webkit-transform":"rotate(45deg)"});这里的一个问题是如何将'sdegree'变量替换样式表中的45deg，可以这样做：varsrotate="rotate(" sdegree "deg)";jquery代码修改如下：$("#sec").css({"-moz-transform":srotate,"-webkit-transform":srotate});整合所有代码的jQuery代码如下：复制代码$(document).ready(function(){setInterval(function(){varseconds=newDate().getSeconds();varsdegree=seconds*6;varsrotate="rotate(" sdegree "deg)";$("#sec").css({"-moz-transform":srotate,"-webkit-transform":srotate});},1000);setInterval(function(){varhours=newDate().getHours();varmins=newDate().getMinutes();varhdegree=hours*30 (mins/2);varhrotate="rotate(" hdegree "deg)";$("#hour").css({"-moz-transform":hrotate,"-webkit-transform":hrotate});},1000);setInterval(function(){varmins=newDate().getMinutes();varmdegree=mins*6;varmrotate="rotate(" mdegree "deg)";$("#min").css({"-moz-transform":mrotate,"-webkit-transform":mrotate});},1000);});请注意，我们在Javascript中使用了setinterval函数，每秒执行一次。这个函数中也有一些获取时间的变量，所以每次调用时间值都会自动更新。这个函数中也有一些获取时间的变量，所以每次调用都会自动更新时间值。这样，我们的时钟就可以工作了。