如何使用raphael js制作当前时钟

时间:2015-02-19 04:03:17

标签: javascript raphael

我有一个使用raphael库的时钟代码。我遇到的问题是我无法显示当前时间。我有适当的动作,但不会显示“当前时间”。我确定此代码中存在错误。但是我找到了代码,我正在使用它作为我的时钟的基础。我上周开始学习这个,所以我不确定如何实际做到这一点以及代码应该说什么。

因此,我应该如何将此代码更改为:

使时钟在计算机上显示当前时间。我认为获取时间函数和获取秒数等应该自动执行此操作?

代码如下

代码如下。

window.onload = function(){

var canvas = Raphael("pane",0,0,500,500);

canvas.circle(200,150,100).attr("stroke-width",2);
canvas.circle(200,150,3).attr("fill","#000");

var angleplus = 360,rad = Math.PI / 180,
cx = 200,cy =150 ,r = 90,
startangle = -90,angle=30,x,y, endangle;

 for(i=1;i<13;i++)
 {

     endangle = startangle + angle ;

     x = cx + r  * Math.cos(endangle * rad);
     y = cy + r * Math.sin(endangle * rad);

     canvas.text(x,y,i+"");

      startangle = endangle;
 }

var hand = canvas.path("M200 70L200 150").attr("stroke-width",1);
var minute_hand = canvas.path("M200 100L200 150").attr("stroke-width",2);
var hour_hand = canvas.path("M200 110L200 150").attr("stroke-width",3);

var time = new Date();

angle = time.getSeconds() * 6;

minute_hand.rotate(6 * time.getMinutes(),200,150);

var hr = time.getHours();
if(hr>12)
hr = hr -11;

hour_hand.rotate(30 * hr,200,150);

var minute_angle= 6 + time.getMinutes()*6,hour_angle=0.5+   
      time.getMinutes()*30;
setInterval(function(){
                 angle = angle + 6;
                 if(angle>=360)
                 {
                     angle=0;

                minute_hand.rotate(minute_angle,200,150);
                 minute_angle = minute_angle + 6;

                  hour_hand.rotate(hour_angle,200,150);
                      hour_angle = hour_angle + 0.5;
                 }
                  if(minute_angle>=360)
                  {
                      minute_angle=0;

                  }

                 hand.rotate(6,200,150);

                 },1000); 

0 个答案:

没有答案