• 展开微博窗口
  • QQ:52619941
  • 微信:cnmemory
  • 展开分类目录
  • 还没有账号?

Memory

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

码字很辛苦,转载请注明来自雨林寒舍《CSS3+JS+PHP制作实时时钟》

评论

  1. 凌薇 #1

    楼上的稍等啦

    回复
    2015-12-2
  2. #2

    打算撒是啊

    回复
    2015-11-30
  3. n年那时 #3

    博主,发表文章时,COPE部分代码区域的背景还有样式是怎样弄的呢

    回复
    2015-01-2
  4. 寻寻觅博客 #4

    博主 我下载之后安装失败是什么原因啊

    回复
    2014-09-11
  5. 寻寻觅博客 #5

    感觉你真厉害啊

    回复
    2014-09-11
  6. 灰常记忆 #6

    不想折腾代码了

    回复
    2014-08-25
  7. Memory #7

    测试一下原生评论

    回复
    2014-08-22
  8. 呵呵 #8

    牛逼

    回复
    2014-08-22