首页 >web前端 >html教程 >css3制作时钟_html/css_WEB-ITnose

css3制作时钟_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:41:051315浏览

制作时钟之前需要了解几点知识:

一、圆上点坐标的计算

二、时钟上时针、分针、秒针的换算

我们观察一下时钟,首先想到的是与角度有关。再有是,秒针,分针,时针之间的进位关系。

  比如说h时m分s秒,时针、分针、秒针此时此刻的角度:(-90,是因为rotateZ角度旋转规则,默认是从水平开始,逆时针为+,顺时针为-)

  ds  =  s*6-90;

  dm =  m*6+(s/60*6)-90;

  dh  =  h*30+(m/60*30)-90; 

  1. 我们都知道1s = 1 / 60min,1min = 1 / 60h;
  2. 观察任意一款手表或时钟,我们会发现,通常时钟的表盘会被分成12个大格,5*12=60个小格,而整个表盘是360°,也就是说每个小格是6°。换句话说,秒针和分针每动一下,都会走过1小格,走过了6°,而时针动一下,则走过了一大格,5*6°=30°;因此,秒针和分针移动的基值是6°,时针是30°;
  3. 另外在分针走动的时候,时针也不是静止不动的,而是不甘寂寞的默默向前移动,也就是说当分针动一下,走了6°时,时针实际上也挪动了1 / 60 * 30°。所以,计算时针角度时不要忽略了分针对其的影响。(虽然秒针对分针也有着同样的影响,但几乎看不出来,所以,通常我们会将其忽略)

三、js获取时间

  • 获得当前时间,var date = new Date(),获得当前时间,以毫秒数表示。
  • getFullYear(),4位年份
  • getMonth(),从0-11,分别表示1-12月
  • getDate(),月份中的天数
  • getDay(),从0-6,分别表示星期日-星期六
  • getHours(),0-23
  • getMinutes(),0-59
  • getSecond(),0-59
  • 代码如下:




    时钟效果的制作








    CSS 时钟效果演示












          /*
          * 绘制钟表刻度线
          * @param wrap 刻度线的父容器
          * @param total 刻度线的总个数
          * @param translateX 刻度线在x轴方向的偏移量
          */

          function drawLines(wrap,total,translateX){
          var gap = 360/total;
          var strHtml ='';
          for (var i = 0; i strHtml += '

        1. ';
          };
          wrap.html(strHtml);
          }

          /*
          * 绘制时钟数字
          * @param wrap 数字的父容器,仿照径向菜单原理http://www.cnblogs.com/wuxiaobin/p/4644806.html
          * 由于旋转是从水平x轴开始旋转的,所以需要-90
          */
          function drawNumbers(wrap){
          var radius = wrap.width() / 2;

          var strHtml = '';
          for(var i=1; i var myAngle = (i-3)/6 * Math.PI; //原公式 角度=>弧度 (i*30-90)*(Math.PI/180) => (i-3)/6 * Math.PI;

          var myX = radius + radius*Math.cos(myAngle), // x=r+rcos(θ)
          myY = radius + radius*Math.sin(myAngle); // y=r+rsin(θ)

          strHtml += '

        2. ' + i + '
        3. ';
          }
          wrap.html(strHtml);
          }


          /*
          * 钟表走动,转动秒针、分针、时针
          */
          function move(){
          var domHour = $(".hour"),
          domMin = $(".min"),
          domSec = $(".sec");

          setInterval(function(){
          var now = new Date(),
          hour = now.getHours(),
          min = now.getMinutes(),
          sec = now.getSeconds();

          var secAngle = sec*6 - 90, // s*6-90
          minAngle = min*6 + sec*0.1 - 90, // m*6+s*0.1-90
          hourAngle = hour*30 + min*0.5 - 90; // h*30+m*0.5 - 90

          domSec.css('transform', 'rotate(' + secAngle + 'deg)');
          domMin.css('transform', 'rotate(' + minAngle + 'deg)');
          domHour.css('transform', 'rotate(' + hourAngle + 'deg)');

          document.title = hour + ':' + min + ':' + sec;

          },1000);

          }
          })


          最终效果:

          声明:
          本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn