如何利用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函数，每秒执行一次。这个函数中也有一些获取时间的变量，所以每次调用时间值都会自动更新。这个函数中也有一些获取时间的变量，所以每次调用都会自动更新时间值。这样，我们的时钟就可以工作了。

以上就是关于如何利用CSS3和jQuery制作一个漂亮的动态时钟的相关介绍，更多如何利用CSS3和jQuery制作一个漂亮的动态时钟相关内容可以咨询我们或者浏览页面上的推荐内容。我们将让你对如何利用CSS3和jQuery制作一个漂亮的动态时钟有更深的了解和认识。