CSS3+JS+PHP制作实时时钟

闲下来的时候就爱捣鼓些小玩意，顺便来一首经典的老歌，随意感受一下^_^，回归正题，今天给大家带来的是一款由CSS3实现的实时时钟（DEMO的链接在文本的末尾），主要的思路是利用css3的transform和animation来实现一个会走的钟摆，那么，为什么会利用到PHP呢？因为要通过animation制作一个指针转动的动画，但是在animation动画中，指针的起始点要根据实际的时间来控制，我们就需要PHP的帮助，通过下面的代码计算出时针，分针，秒针的初始位置:

date_default_timezone_set('Asia/Shanghai');
$sec = date('s');
$min = date('i')+$sec/60;
$hour = date('H')+$min/60;
$hour_deg = floor($hour/12*360);
$min_deg = floor($min/60*360);
$sec_deg = floor($sec/60*360);

接着通过定义三个不同的动画分别赋予时、分、秒针，这样来做就必须采用内部样式表，举个秒针的例子

@keyframes sec_rotate {
 from {transform: rotate(<?=($sec_deg)?>deg);} to {transform: rotate(<?=(360+$sec_deg)?>deg);}
}

我们在动画中from和to里嵌入了通过PHP计算得到的秒针初始的位置，接着为秒针加上动画

animation: sec_rotate 60s infinite linear;

秒针的速度是60s转过一圈，而至于时针和分针分别是43200s（因为表盘是12小时制的，别计算成86400了）和3600s，当然我个人认为不会有人一直盯着你页面一个小时不放的。

最后，表盘上1-12的数字

<span class="digit">1</span>
 <span class="digit">2</span>
 <span class="digit">3</span>
 <span class="digit">4</span>
 <span class="digit">5</span>
 <span class="digit">6</span>
 <span class="digit">7</span>
 <span class="digit">8</span>
 <span class="digit">9</span>
 <span class="digit">10</span>
 <span class="digit">11</span>
 <span class="digit">12</span>

我们需要通过一段JS代码来为他排列在表盘中

$(document).find('.digit').each(function(i){
 var deg = (i + 1) * 30, rad = (Math.PI/180)*(deg-90);
 var x = Math.round( Math.cos(rad) * 110 ), y = Math.round( Math.sin(rad) * 110 );
 this.style.cssText='-webkit-transform: translate3d('+x+'px,'+y+'px,0px);-moz-transform: translateX('+x+') translateY('+y+');transform: translate3d('+x+'px,'+y+'px,0)';
 });

我们假想以表盘中心为原点，建立一个直角坐标系，以原点为圆心作圆，在已知角度和半径的情况下计算出1-12的坐标，但由于时钟是顺时针方向运动，而在象限中，角度是由逆时针开始计算，所以这里的x坐标不是使用sin来计算，我们以cos的结果作为x，以sin的结果作为y，将原有的角度-90或者加上270进行一个翻转，最后得出坐标，为相应的数字赋予css改变其位置。

一个实时走动的时针就做好啦，当然，你也完全通过js来实现，利用setInterval来为表针制作转动的动画。

演示地址：http://www.im050.com/im050/memory/demo/css3-jquery-clock.php
下载地址：http://www.im050.com/im050/memory/demo/clock.rar 或者 这里

来自http://www.im050.com/posts/171

标签：PHP, CSS, JavaScript, 实例