Clock effect _ raphael. js

Clock effect: A long time ago, flash provided a variety of interesting web pages. In recent years, canvas played a game with it after html5 launched canvas. Now we are talking about implementing the clock effect with raphaeljs.

Raphaeljs encapsulates svg and vml operations, and SVG (Scalable Vector Graphics) scales Vector Graphics. The Vector Markup Language (VML) Vector Markup Language.


First full eye, win7 clock effect show, see:




The clock to be unveiled next (the super texture of metallic luster) can be found:


Briefly describe the implementation principle:
Step 1: draw a clock. Clock disc, clock hour minute second pointer, scale, time. The drawing method is circle, rect, and text.

r.circle(150, 150, 140).attr({fill:"r(0.5,0.5)#ffffff-#efefef",stroke:"#cecece","stroke-width":1r.rect(144,150,8,100,4).attr({fill:"#ccc",stroke:"none"r.rect(28,145,10,4).attr({fill:"#999",stroke:"none"r.text(150,220,(dh+":"+dm+":"+ds)).attr({font: "14px Arial", fill: "#000"});

Step 2: Move the pointer.

 d =  ds = dm = dh = dD = dM = d.getMonth()+1 dY =+30+(dm/60)+(ds/(60*60)))*30,150,150+30+(ds/60))*6,150,150); s.rotate((ds+30)*6,150,150setInterval(= ===== d.getMonth()+1=6/(60*60),150,150);    m.rotate(6/60,150,150);    s.rotate(6,150,1501000);

 

Step 3: display the year and month.

Txt = r. text (150,220, (dh + ":" + dm + ":" + ds )). attr ({font: "14px Arial", fill: "#000" txt1 = r. text (150,200, dY + "year" + dM + "month" + dD + "day week" + txtT. charAt (dT )). attr ({font: "14px Arial", fill: "#000" setInterval (+ ":" + dm + ": "+ +" year "+ dM +" month "+ dD +" day week "+ 1000 );

 

If you are interested, you can use your imagination to make more clock effects.

Note: I am looking for a front-end job. QQ: 1173290990. (If your parents are not far away, you must visit the game)




DEMO:

</P>

Run code