时钟效果，很久很久以前由flash提供网页的各种有趣的效果，近些年由html5推出canvas后，canvas与之博弈。现在讲的是用raphaeljs实现时钟效果。
raphaeljs封装了svg和vml操作方法，SVG(Scalable Vector Graphics)可缩放矢量图形。VML(The Vector Markup Language)矢量可标记语言。
先饱饱眼福，win7中的时钟效果show下，见下图：
接下来亮相的时钟效果图（金属光泽的超质感），见下图：
简单描述实现原理：
第一步：画时钟。时钟圆盘、时钟时分秒指针、刻度、时间。画图方法circle、rect、text。
// 画时钟表盘 r.circle(150, 150, 140).attr({fill:"r(0.5,0.5)#ffffff-#efefef",stroke:"#cecece","stroke-width":1}); // 画时针 r.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"});
第二步：指针动起来动起来。
// 初始化时分秒指针 var d = new Date(); var ds = d.getSeconds(); var dm = d.getMinutes(); var dh = d.getHours(); var dD = d.getDate(); var dM = d.getMonth()+1; var dY = d.getFullYear(); h.rotate((dh+30+(dm/60)+(ds/(60*60)))*30,150,150); m.rotate((dm+30+(ds/60))*6,150,150); s.rotate((ds+30)*6,150,150); // 每秒更新指针 setInterval(function(){ d = new Date(); ds = d.getSeconds(); dm = d.getMinutes(); dh = d.getHours(); dD = d.getDate(); dM = d.getMonth()+1; dY = d.getFullYear(); h.rotate(6/(60*60),150,150); m.rotate(6/60,150,150); s.rotate(6,150,150); },1000);
第三步：显示时间年月份。
// 初始化时间 var txt = r.text(150,220,(dh+":"+dm+":"+ds)).attr({font: "14px Arial", fill: "#000"}); var txt1 = r.text(150,200,dY+"年"+dM+"月"+dD+"日 星期"+txtT.charAt(dT)).attr({font: "14px Arial",fill: "#000"}); // 每秒更新时间 setInterval(function(){ txt.attr({text:dh+":"+dm+":"+ds}); txt1.attr({text:dY+"年"+dM+"月"+dD+"日 星期"+txtT.charAt(dT)}); },1000);
搞定，超爽，感兴趣的可以发挥想象力做出更多时钟效果。
DEMO：