时钟效果_raphael.js

时钟效果,很久很久以前由flash提供网页的各种有趣的效果,近些年由html5推出canvas后,canvas与之博弈。现在讲的是用raphaeljs实现时钟效果。

raphaeljs封装了svg和vml操作方法,SVG(Scalable Vector Graphics)可缩放矢量图形。VML(The Vector Markup Language)矢量可标记语言。


先饱饱眼福,win7中的时钟效果show下,见下图:
时钟效果_raphael.js



接下来亮相的时钟效果图(金属光泽的超质感),见下图:
时钟效果_raphael.js

简单描述实现原理:
第一步:画时钟。时钟圆盘、时钟时分秒指针、刻度、时间。画图方法circle、rect、text。

时钟效果_raphael.js
// 画时钟表盘
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"});
时钟效果_raphael.js


第二步:指针动起来动起来。

时钟效果_raphael.js
// 初始化时分秒指针
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);
时钟效果_raphael.js

 

第三步:显示时间年月份。

时钟效果_raphael.js
// 初始化时间
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);
时钟效果_raphael.js

 


搞定,超爽,感兴趣的可以发挥想象力做出更多时钟效果。


备注:本人现寻求一份前端工作,QQ:1173290990。(父母在不远游,游必有方)




DEMO:

时钟效果_raphael.js,布布扣,bubuko.com

时钟效果_raphael.js

上一篇:[转]Oracle 11g New 热补丁


下一篇:HTML5-认识