时钟效果

来源:转载

时钟效果,很久很久以前由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:


分享给朋友:
------分隔线----------------------------
您可能感兴趣的文章:
随机阅读: