动态时钟的制作过程以CSS3+jQuery

评论：这是从与CSS3和jQuery老式时钟翻译，主要是关于如何创建一个漂亮的动态时钟使用CSS3和jQuery





本文从与CSS3和jQuery老式时钟翻译，主要是关于如何创建一个漂亮的动态时钟使用CSS3和jQuery。



嗨，你好，我的名字是Toby Pitman，克里斯邀请我写在最近的一些实验结果论坛的一篇关于我的文章，所以当我看到一些新的CSS3 WebKit的博客上看到了第一个动画，有旋转性深深地吸引了我的注意，然后开始写这篇文章。我是什么可以在网页上旋转的思维。（GIF动画图片可以），所以我有一个想法——是的，时钟可以旋转吗开始！
CSS3变换：旋转
变换：旋转是CSS3的新功能，它可以让你…，当然，做一些旋转，变换也可以让你的规模，倾斜，和移动对象在网页上，都可以通过转换属性动画。
听起来耳熟吗是的，当然，之前，我们仍将结合jQuery实现动画效果的页面上的元素，因为jQuery的使用可以很容易地操作CSS得到动画效果。思考一：悬停效果，你会有一些想法，关于如何实现这个例子，不是jQuery和MooTools是强大的，但它足以做一些很酷的东西。
注意：这个时钟示例只能运行在Firefox 3.1、Safari 3 +和Chrome浏览器上。
时钟的图片
首先，我们需要为时钟的图形界面准备一些照片，这里我们使用一张时钟和三笔的图片，其中运动的指针600times，其中30是由PS图象处理软件切出，它是垂直放置，然后旋转属性用于旋转它周围中心点。当然，使用指针的一个透明的PNG格式的图片。




HTML标签
这个时钟的HTML标记非常简单。只使用UL列表。每个列表项（LI）对应于3个运动指针，并将相应的id分配给它。代码如下：
HTML标签
这个时钟的HTML标记非常简单。只使用UL列表。每个列表项（LI）对应于3个运动指针，并将相应的id分配给它。代码如下：





CSS代码
复制代码
{ #时钟
职位：相对；
宽度：600px；
身高：600px；
保证金：20px汽车0汽车；
背景：URL（钟面。JPG）；
列表样式：无；
}
#秒，# min，#小时{
位置：绝对的；
宽度：30px；
身高：600px；
上图：0px；
左：285px；
}
{ #秒
背景：URL（sechand。PNG）；
Z指数：3；
}
{ # min
背景：URL（minhand。PNG）；
Z指数：2；
}
{ #小时
背景：URL（时针。PNG）；
Z指数：1；
}
复制代码
CSS代码也很简单。因为3运动的指针是相同的大小和从同一位置开始，我们编写自己的代码来简化代码。为了使内部时钟的指针实现绝对定位（绝对定位），我们设置UL相对定位（位置）。
好的，我们的jQuery将会出现。
jQuery Javaｓｃｒｉｐｔ
这里Javaｓｃｒｉｐｔ主要完成以下工作：
获取当前时间
计算并添加每个元素的CSS样式（旋转角度）
定期设置CSS样式
得到的时间
你可以用PHP把时间和日期等同起来。起初，我的第一个想法是使用PHP，但后来我发现Javaｓｃｒｉｐｔ也有构建日期和时间的函数函数，唯一需要注意的是Javaｓｃｒｉｐｔ获得本地时间而不是服务器时间。
首先，我将使用日期（）函数获取日期信息并将其赋给变量。我们可以通过GetSeconds得到3个指针信息（）、GetMinutes（）或（）获得当前的小时。
VaR秒=新的日期（）GetSeconds（）；
上面的代码返回一个0到59的数字，并将其分配给秒变量。
角度采集
下一步，我将计算每个指针的角度，我们将每个星期分成60个相等的部分，所以只要360 60得到6，就意味着每分钟或每分钟指针都会达到6度，我们将结果保存在另一个变量中，代码如下所示：
VaR学位=秒* 6；
对于时间销的情况稍有不同，因为每个周期都是12等，所以对于小时销的角度为30度：360 / 12 = 30.now，如果这个增量运动时间销移动是很容易的，但它不是那么简单。根据手部运动一短距离的值，如3:30将在3和4小时中，但是我们能怎么做呢，请看下面的代码：
无功hdegree =小时* 30 +（分钟/ 2）；
基本上，我们需要在小时后面加上0.5到2的分钟数（旋转属性支持一个小的浮点值）。
例如:
2.40会：2 * 30 = 60度+ 40 / 2 = 20度= 80度进行hdegree
设置样式
以下是CSS3旋转的CSS样式表代码：
{ #秒
WebKit的变换：旋转（45deg）；
-moz变换：旋转（45deg）；
}
这里我们使用jQuery动态地添加上面的样式：
$（#秒）。Css（{-moz变换：旋转（45deg）
在这里，我们的问题之一是如何在样式表the'sdegree'variable 45度代替，可以做。
无功srotate =旋转（+学位+度）；
jQuery代码被修改如下：
$（#秒）。Css（{-moz变换：srotate，-webkit变换：srotate }）；
集成所有代码
所有的jQuery代码如下所示：
复制代码
$（文档）Ready（函数（）{）
setInterval（）{（）函数（
VaR秒=新的日期（）GetSeconds（）；
VaR学位=秒* 6；
无功srotate =旋转（+学位+度）；
$（#秒）。Css（{-moz变换：srotate，-webkit变换：srotate }）；
}，1000）；
setInterval（）{（）函数（
无功小时=新的日期（）GetHours（）；
VaR分钟=新的日期（）GetMinutes（）；
无功hdegree =小时* 30 +（分钟/ 2）；
无功hrotate =旋转（+ hdegree +度）；
$（#小时）。Css（{-moz变换：hrotate，-webkit变换：hrotate }）；
}，1000）；
setInterval（）{（）函数（
VaR分钟=新的日期（）GetMinutes（）；
无功mdegree =分钟×6；
无功mrotate =旋转（+ mdegree +度）；
$（#民）。Css（{-moz变换：mrotate，-webkit变换：mrotate }）；
}，1000）；
}）；
复制代码
请注意，这里我们使用setInterval函数在Javaｓｃｒｉｐｔ中，这是一次执行。一些变量，得到的时间也在这个函数，所以每个电话自动更新时间价值。
这样，我们的时钟就可以工作了。