Jojoxx.net logotyp

 

 

Användare ikonAnvändare
Besökare just nu: 109
Snabblänkar ikonSnabblänkar
JavaScript-arkivet
Perl
FAQ

Sök på Jojoxx.net


Analog klocka 2

Exempel

Kod


<script type="text/javascript">
/* Detta script finns att hämta på http://www.jojoxx.net och 
   får användas fritt så länge som dessa rader står kvar. */ 

var clocksize=196;
var hourptrsize=60; var hourptrcolor="black";
var minptrsize=70;  var minptrcolor="black";
var secptrsize=80;
var clockFaceImage="/images/Clock-face-3.png";
// More clock faces at http://www.chicagocandycreations.com/clocks.htm

var isFF=!document.all;
function canvas(width,height){
	if(isFF){
		var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
		svg.setAttribute('width', width);
		svg.setAttribute('height', height);
		svg.setAttribute('viewBox', '0 0 '+width+' '+height);
	} else {
		if(!window.vml){
			window.vml = {};
			document.createStyleSheet().addRule(".vml", "behavior:url(#default#VML);display:inline-block;");
			if(!document.namespaces.vml){ document.namespaces.add("vml", "urn:schemas-microsoft-com:vml"); }
		}
		var svg = document.createElement('div');
		svg.style.width=width+"px";
		svg.style.height=height+"px";
		svg.style.overflow="hidden";
	}
	return svg;
}
function line(x1,y1,x2,y2,width,color){
	width=(width)?width:1;
	color=(color)?color:"black";
	if(isFF){
		var line = document.createElementNS('http://www.w3.org/2000/svg','line');
		line.setAttribute('x1', x1);
		line.setAttribute('y1', y1);
		line.setAttribute('x2', x2);
		line.setAttribute('y2', y2);
		line.setAttribute('style', 'stroke:'+color+';stroke-width:'+width);
	} else {
		var line = document.createElement('<vml:' + 'line' + ' class="vml">');
		line.setAttribute('from', x1+','+y1);
		line.setAttribute('to', x2+','+y2);
		line.setAttribute('strokecolor', color);
		line.setAttribute('strokeweight', width+'px');
		line.style.position="absolute";
	}
	return line;
}
function circle(x,y,r,color,fillcolor){
	color=(color)?color:"black"; fillcolor=(fillcolor)?fillcolor:"white";
	if(isFF){
		var circle = document.createElementNS('http://www.w3.org/2000/svg','circle');
		circle.setAttribute('cx', x);
		circle.setAttribute('cy', y);
		circle.setAttribute('r', r);
		circle.setAttribute('style', 'stroke:'+color+';stroke-width:1');
		circle.setAttribute('fill', fillcolor);
	} else {
		var circle = document.createElement('<vml:' + 'oval' + ' class="vml">');
		circle.setAttribute('strokecolor', color);
		circle.setAttribute('fillcolor', fillcolor);
		circle.style.position="absolute";
		circle.style.marginLeft=(x-r)+"px";
		circle.style.marginTop=(y-r)+"px";
		circle.style.width=(r*2)+"px";
		circle.style.height=(r*2)+"px";
	}
	return circle;
}

if(clockFaceImage){
	document.write('<div id="analogueclock" style="position:absolute;"></div>');
	document.write('<img src="'+clockFaceImage+'">');
} else {
	document.write('<div id="analogueclock"></div>');
}
var center=parseInt(clocksize/2);
clockcanvas=canvas(clocksize,clocksize);
if(!clockFaceImage){
	clockface=circle(center,center,center-1);
	clockcanvas.appendChild(clockface);
	for(var i=0;i<360;i+=(360/12)){
		marker=line(parseInt(Math.sin(i*Math.PI/180)*(center-10)+center),parseInt(-Math.cos(i*Math.PI/180)*(center-10)+center),parseInt(Math.sin(i*Math.PI/180)*(center-4)+center),parseInt(-Math.cos(i*Math.PI/180)*(center-4)+center),3);
		clockcanvas.appendChild(marker);
	}
}
var secVinkel=new Date().getSeconds()*6;
var minVinkel=(new Date().getMinutes()*6)+parseInt((secVinkel/360)*6);
var hourVinkel=((new Date().getHours()+new Date().getMinutes()/60)*30)+parseInt((minVinkel/360)*6);
hourline=line(center,center,parseInt(Math.sin(hourVinkel*Math.PI/180)*(hourptrsize)+center),parseInt(-Math.cos(hourVinkel*Math.PI/180)*(hourptrsize)+center),3,hourptrcolor);
clockcanvas.appendChild(hourline);
minline=line(center,center,parseInt(Math.sin(minVinkel*Math.PI/180)*(minptrsize)+center),parseInt(-Math.cos(minVinkel*Math.PI/180)*(minptrsize)+center),2,minptrcolor);
clockcanvas.appendChild(minline);
secline=line(center,center,parseInt(Math.sin(secVinkel*Math.PI/180)*(secptrsize)+center),parseInt(-Math.cos(secVinkel*Math.PI/180)*(secptrsize)+center),1,"red");
clockcanvas.appendChild(secline);
middledot=circle(center,center,5,hourptrcolor,hourptrcolor);
clockcanvas.appendChild(middledot);
document.getElementById("analogueclock").appendChild(clockcanvas);

function clockupdate(){
	var secVinkel=new Date().getSeconds()*6;
	var minVinkel=(new Date().getMinutes()*6)+parseInt((secVinkel/360)*6);
	var hourVinkel=((new Date().getHours()+new Date().getMinutes()/60)*30)+parseInt((minVinkel/360)*6);
	clockcanvas.removeChild(hourline);
	hourline=line(center,center,parseInt(Math.sin(hourVinkel*Math.PI/180)*(hourptrsize)+center),parseInt(-Math.cos(hourVinkel*Math.PI/180)*(hourptrsize)+center),3,hourptrcolor);
	clockcanvas.appendChild(hourline);
	clockcanvas.removeChild(minline);
	minline=line(center,center,parseInt(Math.sin(minVinkel*Math.PI/180)*(minptrsize)+center),parseInt(-Math.cos(minVinkel*Math.PI/180)*(minptrsize)+center),2,minptrcolor);
	clockcanvas.appendChild(minline);
	clockcanvas.removeChild(secline);
	secline=line(center,center,parseInt(Math.sin(secVinkel*Math.PI/180)*(secptrsize)+center),parseInt(-Math.cos(secVinkel*Math.PI/180)*(secptrsize)+center),1,"red");
	clockcanvas.appendChild(secline);
}
clockupdate(); setInterval("clockupdate()",1000);
</script>


,