時鐘效果

時間 2019-11-06

標籤時鐘效果简体版

原文原文鏈接

時鐘效果，好久好久之前由flash提供網頁的各類有趣的效果，近些年由html5推出canvas後，canvas與之博弈。如今講的是用raphaeljs實現時鐘效果。

raphaeljs封裝了svg和vml操做方法，SVG(Scalable Vector Graphics)可縮放矢量圖形。VML(The Vector Markup Language)矢量可標記語言。

先飽飽眼福，win7中的時鐘效果show下，見下圖：

接下來亮相的時鐘效果圖（金屬光澤的超質感），見下圖：

簡單描述實現原理：
第一步：畫時鐘。時鐘圓盤、時鐘時分秒指針、刻度、時間。畫圖方法circle、rect、text。html

// 畫時鐘錶盤
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"});

第二步：指針動起來動起來。html5

// 初始化時分秒指針
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);

第三步：顯示時間年月份。jquery

// 初始化時間
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);

搞定，超爽，感興趣的能夠發揮想象力作出更多時鐘效果。canvas

DEMO：svg

<!doctype html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>時鐘效果</title> <style> *{margin: 0;padding: 0;} .main{width:960px; margin: 0px auto;} .mainTit{color: #f00; font-size: 50px;font-weight:bold;text-align: center; text-shadow: 3px 1px 6px #f60; padding: 30px 0px;} .main .block{width:300px; height: 300px; margin: 0px auto;} .main .remark{color: #333;font-size: 12px; text-align: center; margin-top: 100px;} </style> </head> <body> <div class="main"> <div class="mainTit">時鐘</div> <div class="block" id="test"></div> </div> <script src="http://files.cnblogs.com/kuikui/jquery-1.10.2.min.js"></script> <script src="http://files.cnblogs.com/kuikui/raphael.js"></script> <script> $(function(){ var r = Raphael("test",300,300); r.circle(150, 150, 140).attr({fill:"r(0.5,0.5)#ffffff-#efefef",stroke:"#cecece","stroke-width":1}); r.circle(150, 150, 132).attr({fill:"r(0.5,0.5)#ffffff-#efefef",stroke:"#cecece"}).glow({width:8,color:"#aaa"}); r.circle(150, 150, 100).attr({fill:"#fff",stroke:"none","fill-opacity": 0.3}).glow({width:8,color:"#aaa",offsetx:0,offsety:0}); r.rect(28,145,10,4).attr({fill:"#999",stroke:"none"}); r.rect(145,28,4,10).attr({fill:"#999",stroke:"none"}); r.rect(148,265,4,10).attr({fill:"#999",stroke:"none"}); r.rect(265,148,10,4).attr({fill:"#999",stroke:"none"}); 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(); var dT = d.getDay(); var txtT = "日一二三四五六"; 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" }); var h = r.rect(144,150,8,100,4).attr({fill:"#ccc",stroke:"none"}); var m = r.rect(148,150,4,115,2).attr({fill:"#ccc",stroke:"none"}); var s = r.rect(150,150,1,130).attr({fill:"#f60",stroke:"none"}); r.circle(150, 150, 10).attr({fill:"#f60",stroke:"none"}).glow({width:6,color:"#f60"}); r.circle(150, 150, 6).attr({fill:"r(0.5,0.5)#ffffff-#efefef",stroke:"none"}); 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(); txt.attr({text:dh+":"+dm+":"+ds}); txt1.attr({text:dY+"年"+dM+"月"+dD+"日星期"+txtT.charAt(dT)}); h.rotate(6/(60*60),150,150); m.rotate(6/60,150,150); s.rotate(6,150,150); },1000); }); </script> </body> </html>ui

spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。