CSS3電子鐘(圓形指針電子表)

2024-09-05 12:18:53

字體：大中小

來源：轉載

供稿：網友

又一個HTML5電子鐘特效，圓形帶指針的電子表特效，自動讀取系統時間，適時顯示時間。基于HTML5 Canvas和CSS3技術，那些張炫麗效果就不說了，我只想說CSS3配合HTML5，真絕了，以后可以不用Flash做動畫了，呵呵。

<!doctype html><html><head><meta charset="utf-8"><title>CSS3電子鐘</title><style type="text/css">html,body,canvas,div{ margin:0; padding:0;}.wrapper{ width:318px; height:318px; margin:100px auto; position:relative;}#loading{ width:318px; height:318px; position:absolute; left:0; top:0; background:url(360Image/loader.gif) no-repeat center center; z-index:10;}</style></head><body><div   id="iwvjtn8m0"   class="wrapper"><canvas id="canvas" width="318" height="318">您的瀏覽器不支持Canvas</canvas><div   class="iwvjtn8m0"   id="loading"></div></div><script type="text/javascript">var context=document.getElementById('canvas').getContext('2d'),	loader=document.getElementById('loading'),	aImg=['fancyclock.png','hour.png','minute.png','second.png'],	IMGPATH="../images/";var Clock=function(){	//加載圖片計數器	this.imageCount=0;	//存儲image變量	this.imgVar={};	//動畫幀數	this.fps=60;	//幀數標識	this.fpsCount=0;	this.init.apply(this,arguments);}Clock.prototype={	init:function(context,confing){		this.context=context;		this.aImg=confing.imgAry;		this.IMGPATH=confing.imgPath;		if(confing.loading){			this.loading=confing.loading;		}		this.imagesLoad();	},	//圖片加載	imagesLoad:function(){		var imgAry=this.aImg,			self=this;		for(var i=0,len=imgAry.length;i<len;i++){			var img=imgAry[i],				index=img.indexOf('.'),				name=img.substring(0,index);			this.imgVar[name]=new Image();			this.imgVar[name].src=this.IMGPATH+img;			this.imgVar[name].onload=function(){				self.imageCount++;				if(self.isImagesLoad()){					if(self.loading){						self.loading.style.display="none";					}					self.context.translate(self.context.canvas.width/2,self.context.canvas.height/2);					var animation=function(){						return self.draw();						}					animation();					setInterval(animation,1000);				}			}		}	},	nowTime:function(){		var now=new Date(),			hour=now.getHours(),			minute=now.getMinutes(),			second=now.getSeconds();					this.sAngle=second/60*360-180;		this.mAngle=minute/60*360-180;		this.hAngle=((hour+(minute/60))/12)*360-180;	},	//繪制方法	draw:function(){			var self=this;		this.nowTime();		this.context.clearRect(-this.context.canvas.width/2,-this.context.canvas.height/2,this.context.canvas.width,this.context.canvas.height)		self.context.drawImage(self.imgVar.fancyclock,-self.context.canvas.width/2,-self.context.canvas.height/2);		this.context.save();		this.context.rotate(this.hAngle*Math.PI/180);		this.context.drawImage(this.imgVar.hour,-8,-38);		this.context.restore();		this.context.save();		this.context.rotate(this.mAngle*Math.PI/180);		this.context.drawImage(this.imgVar.minute,-8,-30);		this.context.restore();		this.context.save();		this.context.rotate(this.sAngle*Math.PI/180);		this.context.drawImage(this.imgVar.second,-8,-30);		this.context.restore();	},	//判斷圖片是否全部加載	isImagesLoad:function(){		if(this.imageCount>=this.aImg.length){			return true		}else{			return false;			}	}}var clock=new Clock(context,{	imgAry:aImg,	imgPath:IMGPATH,	loading:loader});</script></body></html>

上一篇：HTML5 canvas顏色選擇器

下一篇：純CSS3實現Android開機畫面android robot動畫