《
CSS3和jQuery动态时钟制作过程》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302332152013.htm
HTML标记
--> [
网站建设之]CSS3和jQuery动态时钟制作进程
首先，我们需要筹备一些图片来作为时钟的图形界面。这里我们用一张钟盘图片和三张指针图片，其中运动的指针我们是用photoshop切割出来的600×30的图片，并将其竖直放置。而后利用rotate属性让其绕核心点旋转。当然，指针应用的是透明的PNG格局图片。
HTML标记
这个时钟的HTML标志十分简略，只用了ul列表，每一个列表项（li）分辨对应着3根活动指针，并且给其调配相应的id，代码如下：
<ul id="clock">
<li id="sec"></li>
<li id="hour"></li>
,css3制作网页实例 点击切换不同的CSS列表; ,CSS3入门教程：target伪类简介; <li id=",CSS3入门教程(9)：RGBA声明;min"></li>
</ul>
CSS代码
复制代码
#clock {
position: relative;
width: 600px;
,CSS3入门教程(8)：关于透明度; height: 600px;
margin: 20px auto 0 auto;
background: url(clockface.jpg);
list-style: none;
}
#sec, #min, #hour {
position: absolute;
width: 30px;
height: 600px;
,CSS3入门教程(7)：嵌入字体; 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代码也是无比简单，因为3根运动指针尺寸雷同，并且是从统一个地位开始运动，所以我们为了简化代码就将它们的代码写在一起了。为了能让时钟内部的指 针实现相对定位（absolutely position）我们将ul设成绝对定位（relativeposition）。
好了，下面我们的jQuery就要上场了。
The jQuery JavaScript
这里Javascript重要实现以下工作：
获取当前的时间
盘算并增添每个元素的CSS样式（旋转角度）
周期性地设置CSS样式
获取时间
你兴许会将PHP中的时间和日期等同起来，刚开始的时候我的第一主意也是应用PHP，然而后来我发明javascript中也有结构日期和时间的功效函数。只是需要留神的是javascript获取的是本地时光并不是服务器时间。
首先我将用Date()函数获取日期信息并将其赋给一个变量，我们可以通过GetSeconds(), GetMinutes()或GetHours()获取3根指针的信息，如下代码：
var seconds = new Date().getSeconds();
上面的代码会返回一个0到59的数字并将其分配给seconds变量。
获取角度
接下来我将计算每根指针的角度。我们将每一周分成60等分，所以只有360/60就得到每一份是6，这象征着每一秒钟或者每一分钟指针都将前进6度的角度。我们将计算成果保留到另一个变量中去，代码如下：
var sdegree = seconds * 6;
对时针的情形有点不同，因为每一个周期是12等分的，所以每小时时针前进的角度是30度：360/12=30。既然这样假如时针按这个增量运动那就简单 了，可是却不是这么简单的。它要依据分针的值运动一小段间隔，比方3:30的话时针会在3和4的旁边，然而我们该如何来做呢，请看下面的代码：
var hdegree = hours * 30 + (mins / 2);
基础上咱们须要在hour后面加上分钟数除以2的值，该值在0.5到29.5之间（rotate属性支撑浮点小数值）。
例如：
CSS3 Transform:rotate
Transform:rotate是CSS3的一个新特征，它可以让你...当然，是实现一些旋转的玩意儿啦。Transform也可以让你在网页上实现缩放、倾斜、挪动对象。而且上面的这些都可以通过Transition属性实现动画后果。
请注意：这个时钟例子只能运行在Firefox 3.1+、Safari 3+和Chrome阅读器上。
Hi，大家好，我叫Toby Pitman，Chris曾邀请我写一篇对于最近我在论坛上发的一些试验结果，于是当我在WebKit blog跟saw an article上看一些新的CSS3动画时，有一个rotate属性深深地吸引了我的眼球，于是就开始着手写这篇文章了。我当时就在思考什么货色可以在网页上旋转呢（貌似GIF动画图片能够），于是我有个点子--是的，时钟不就是可以旋转的吗！开端！
时钟图片
听起来很熟习么？是的，当然，和以前一样，我们将仍然联合jQuery来实现页面上元素的动画效果。由于使用jQuery可以便利的操作CSS从而 得到动画效果。联想一下a:hover效果，你就会对如何实现这个例子发生一些设法。它远不jQuery和Mootools那么强盛，但已经足够做一些 很酷的东西了。
这个时钟的HTML标记异常简单，只用了ul列表，每一个列表项（li）分离对应着3根运动指针，并且给其分配相应的id，代码如下：
2.40 将得到: 2 * 30 = 60 degrees + 40 / 2 = 20 degrees --------- --- ---------- hdegree = 80 degrees
设置款式
下面是CSS3 rotate的CSS样式表代码：
#sec {
-webkit-transform: rotate(45deg);
,
CSS3入门教程(6)：多列 多卷; -moz-transform: rotate(45deg);
}
这里我们改用jQuery来动态增加上面的样式：
$("#sec").css({"-moz-transform" : "rotate(45deg)", "-webkit-transform" : "rotate(45deg)"});
这里我们的一个问题是如何将'sdegree'变量调换样式表中的45deg，可以这样做：
var srotate = "rotate(" + sdegree + "deg)";
jquery代码就修正成如下：
$("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
将所有代码整合起来
所有的jQuery代码如下：
复制代码
$(document).ready(function() {
setInterval( function() {
var seconds = new Date().getSeconds();
var sdegree = seconds * 6;
var srotate = "rotate(",
CSS3入门教程(5)：背景图片(背景大小和多背景图); + sdegree + "deg)";
$("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
}, 1000 );
setInterval( function() {
var hours = new Date().getHours();
var mins = new Date().getMinutes();
var hdegree = hours * 30 + (mins / 2);
var hrotate = "rotate(" + hdegree + "deg)";
$("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});
}, 1000 );
setInterval( function() {
var mins = new Date().getMinutes();
var mdegree = mins * 6;
,
CSS3入门教程(4)：关于阴影; var mrotate = "rotate(" + mdegree + "deg)";
,
CSS3入门教程(3)：边框颜色; $("#min"),
CSS3入门教程(2)：边框半径和圆角.css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});
}, 1000 );
});
复制代码
请注意这里我们用了Javascript中的setInterval函数，这个函数每秒钟都会履行一次。一些获取时间的变量也在这个函数中，所以每次调用都会主动更新时间值。
这样，我们的时钟就可以工作了。 Tag：制作 过程 动态
本文译自Old School Clock with CSS3 and jQuery，主要讲述了如何利用CSS3和jQuery制造一个美丽的动态时钟。
(责任编辑：网站建设)
CSS3和jQuery动态时钟制作过程相关文章