类似WebQQ桌面的时钟

来源：互联网发布：苹果笔记本必备软件编辑：程序博客网时间：2024/04/29 03:18

WebQQ登录过后，左下方有一个时钟。试着用Js实现了一下。需要用到Canvas元素和Google 为了让IE兼容的脚本。

效果图如下。

首先创建一个Canvas对象。

时钟的JS源码。

gfc={ ctx:null, canvasId:"canvas", radius:100, originPoint:[200,150], init:function(){ var canvas = document.getElementById(gfc.canvasId); if(canvas.getContext){ gfc.ctx=canvas.getContext('2d'); } else{ gfc.ctx=G_vmlCanvasManager.initElement(canvas).getContext(); //兼容IE的脚本 } var t=window.setInterval("gfc.drawClock()","100"); }, drawClock:function(){ gfc.ctx.save(); gfc.ctx.translate(gfc.originPoint[0],gfc.originPoint[1]); gfc.ctx.beginPath(); gfc.ctx.fillStyle = '#09F'; gfc.ctx.arc(0,0,gfc.radius,0,Math.PI*2,true); gfc.ctx.fill(); gfc.ctx.fillStyle="#ffffff"; gfc.ctx.arc(0,0,gfc.radius-10,0,Math.PI*2,true); gfc.ctx.fill(); gfc.ctx.fillStyle="#000000"; for(var i=0;i<60;i++) { gfc.ctx.save(); gfc.ctx.rotate(Math.PI*2/60*i); if(i%5==0){ gfc.ctx.fillRect(65,-2,20,4); } else{ gfc.ctx.fillRect(75,-1,10,2); } gfc.ctx.restore(); } gfc.getTime();//获取当前时间 gfc.ctx.rotate(Math.PI/2*3); gfc.drawHourHand(); gfc.drawMinuteHand(); gfc.drawSecondHand(); gfc.drawOrigin(); gfc.ctx.restore(); }, drawHourHand:function(){ var Hour=gfc.hour%12; var Offset=(Math.PI*2/60)*Math.floor(gfc.minute/12) gfc.ctx.save(); gfc.ctx.rotate(Hour*Math.PI*2/12+Offset); gfc.ctx.fillRect(-20,-3,60,6); gfc.ctx.restore(); }, drawMinuteHand:function(){ gfc.ctx.save(); gfc.ctx.rotate(gfc.minute*Math.PI*2/60); gfc.ctx.fillRect(-20,-2,75,4); gfc.ctx.restore(); }, drawSecondHand:function(){ gfc.ctx.save(); gfc.ctx.rotate(gfc.second*Math.PI*2/60); gfc.ctx.fillStyle = '#09F'; gfc.ctx.fillRect(-25,-1,85,2); gfc.ctx.beginPath(); gfc.ctx.arc(-27,0,6,0,Math.PI*2,true); gfc.ctx.fill(); gfc.ctx.restore(); }, drawOrigin:function(){ gfc.ctx.fillStyle="#ffffff"; gfc.ctx.beginPath(); gfc.ctx.arc(0,0,2,0,Math.PI*2,true) gfc.ctx.fill(); }, getTime:function(){ var date=new Date(); gfc.hour=date.getHours(); gfc.minute=date.getMinutes(); gfc.second=date.getSeconds(); }}//启动时钟gfc.init();