javascript klok

Bartelmans · 4 jun 2007

Hallo allemaal,

Ik heb op internet een scriptje gevonden voor een klok, maar deze werkt alleen fatsoenlijk in internet explorer.. Wat moet ik veranderen dat het ook goed gaat werken met Firefox, Opera en Safari??

Groeten,
Bart

Hier het script:

HTML:

<script type="text/javascript"> 

var hand_sec_length=0
var hand_min_length=60
var hand_hour_length=45

//Kleur instellingen
var hand_sec_color="#f0f1f1"
var hand_min_color="#da2028"
var hand_hour_color="#da2028"

var hand_sec_weight=0
var hand_min_weight=6
var hand_hour_weight=6

var face_width=200
var face_height=200

var face_outlineweight=5

//Kleur instellingen van de rand
var face_outlinecolor="#404041"

var face_fillcolor="#f0f1f1"

var faceform="oval"
var innercircle_width=25
var innercircle_height=25
var innercircle_outlineweight=5
var innercircle_outlinecolor="#404041"
var innercircle_fillcolor="#404041"

var pi= Math.PI
var x_sec=0
var y_sec=0
var x_min=0
var y_min=0
var x_hour=0
var y_hour=0
var angle=270
var x,y

var opera=navigator.userAgent.match(/Opera/)?1:0 
var ie5=document.getElementById&&document.all&&!navigator.userAgent.match(/Opera/)?1:0 
var ns6=document.getElementById&&!document.all&&!navigator.userAgent.match(/Opera/)?1:0 

function getxy(thistime,thisradius) {
	angle=6*parseInt(thistime)-90
	x=(thisradius*Math.cos(angle*(pi/180)))+face_width/2
	y=(thisradius*Math.sin(angle*(pi/180)))+face_height/2
}

function dorotateIE() {
	var now = new Date()
	var nowsec = now.getSeconds()
	var nowmin = now.getMinutes()
	var nowhour = now.getHours()
	if (nowhour>=12) {
		nowhour-=12
	}
	nowhour=(30*nowhour+(nowmin/2))/6
	getxy(nowsec,hand_sec_length)
	document.getElementById('secid').to=x+","+y
	getxy(nowmin,hand_min_length)
	document.getElementById('minid').to=x+","+y
	getxy(nowhour,hand_hour_length)
	document.getElementById('hourid').to=x+","+y
	var timer=setTimeout("dorotateIE()",1000)
}


function DL_GetElementLeft(eElement) {
    var nLeftPos = eElement.offsetLeft;          
    var eParElement = eElement.offsetParent;     
    while (eParElement != null) {                                            
        nLeftPos += eParElement.offsetLeft;      
        eParElement = eParElement.offsetParent;  
    }
    return nLeftPos;                            
}

function DL_GetElementTop(eElement) {
    var nTopPos = eElement.offsetTop;            
    var eParElement = eElement.offsetParent;     
    while (eParElement != null) {                                            
        nTopPos += eParElement.offsetTop;        
        eParElement = eParElement.offsetParent;  
    }
    return nTopPos;                              
}

function getpos(){
	document.getElementById('roof').style.left=DL_GetElementLeft(document.getElementById('marker'));
	document.getElementById('roof').style.top=DL_GetElementTop(document.getElementById('marker'));
	document.getElementById('marker').style.visibility="hidden"
	document.getElementById('roof').style.visibility="visible"
	if (ie5) {
		dorotateIE()
	}
	else {
		dorotateNS()
	}
}

if (ie5) {
	document.write('<span id="marker" style="position:relative;width:'+face_width+';height:'+face_height+'"><img width='+face_width+' height='+face_height+' src="empty.gif"></span>')
	document.write('<span id="roof" style="position:absolute;top:0px;left:0px;width:'+face_width+'px;height:'+face_height+'px;visibility:hidden">')
document.write('<v:'+faceform+' id="faceid"  strokeweight="'+face_outlineweight+'" strokecolor="'+face_outlinecolor+'" fillcolor="'+face_fillcolor+'" style="position:absolute;top:0px;left:0px;width:'+face_width+'px;height:'+face_height+'px"/>')
	document.write('<v:line id="secid"  strokeweight="'+hand_sec_weight+'" strokecolor="'+hand_sec_color+'" from="'+face_width/2+','+face_height/2+'" to="'+face_width/2+','+face_height/2+'"/>')
	document.write('<v:line id="minid"  strokeweight="'+hand_min_weight+'" strokecolor="'+hand_min_color+'" from="'+face_width/2+','+face_height/2+'" to="'+face_width/2+','+face_height/2+'"/>')
	document.write('<v:line id="hourid"  strokeweight="'+hand_hour_weight+'" strokecolor="'+hand_hour_color+'" from="'+face_width/2+','+face_height/2+'" to="'+face_width/2+','+face_height/2+'"/>')
	document.write('<v:oval id="innercircleid"  strokecolor="'+innercircle_outlinecolor+'" fillcolor="'+innercircle_fillcolor+'" style="position:absolute;top:'+(face_height/2-innercircle_height/2)+'px;left:'+(face_width/2-innercircle_width/2)+'px;width:'+innercircle_width+'px;height:'+innercircle_height+'px">')
	document.write('</v:oval>')
	document.write('</span>')
	window.onload=getpos
}

if (opera || ns6) {
	document.write('<span id="marker" style="position:relative;width:'+(hand_hour_weight+face_width)+';height:'+(hand_hour_weight+face_height)+'">')
	if (ns6) {
		document.write('<img width='+(hand_hour_weight+face_width)+' height='+(hand_hour_weight+face_height)+' src="empty.gif">')
	}
	document.write('</span>')
	document.write('<div id="roof" style="position:absolute;width:'+(hand_hour_weight+face_width)+';height:'+(hand_hour_weight+face_height)+';top:0px;left:0px;visibility:hidden">')
	for (i=1;i<=30;i++) {
		angle=12*parseInt(i)-90
		x=(face_width/2*Math.cos(angle*(pi/180)))+face_width/2
		y=(face_height/2*Math.sin(angle*(pi/180)))+face_height/2
		document.write('<div style="position:absolute;left:'+x+'px;top:'+y+'px;background-color:'+face_outlinecolor+'"><img src="empty.gif" width='+face_outlineweight+'></div>')
	}
	for (i=1;i<=hand_sec_length;i++) {
		document.write('<div id="sec'+i+'" style="position:absolute;left:0px;top:0px;background-color:'+hand_sec_color+'"><img src="empty.gif" width='+hand_sec_weight+'></div>')
	}
	for (i=1;i<=hand_min_length;i++) {
		document.write('<div id="min'+i+'" style="position:absolute;left:0px;top:0px;background-color:'+hand_min_color+'"><img src="empty.gif" width='+hand_min_weight+'></div>')
	}
	for (i=1;i<=hand_hour_length;i++) {
		document.write('<div id="hour'+i+'" style="position:absolute;left:0px;top:0px;background-color:'+hand_hour_color+'"><img src="empty.gif" width='+hand_hour_weight+'></div>')
	}
	document.write('</div>')
	window.onload=getpos
}

</script>

hackerfrans · 4 jun 2007

De code verwijst bij het gebruik van een andere browser dan internet explorer naar een funcite doRotateNS die niet bestaat. Je zal eerst die functie moeten hebben.

Bartelmans · 5 jun 2007

Ja, dat had ik ook gemerkt, maar wat moet ik nu aanpassen bij de functie van die voor IE werkt zodat het ook voor de andere browsers werkt?

hackerfrans · 5 jun 2007

De missende functie:

Code:

function dorotateNS() {
	var now = new Date()
	var nowsec = now.getSeconds()
	var nowmin = now.getMinutes()
	var nowhour = now.getHours()
	if (nowhour>=12) {
		nowhour-=12
	}
	nowhour=(30*nowhour+(nowmin/2))/6
	for (i=1;i<=hand_sec_length;i++) {
		getxy(nowsec,i)
		document.getElementById('sec'+i).style.left=x
		document.getElementById('sec'+i).style.top=y
	}
	for (i=1;i<=hand_min_length;i++) {
		getxy(nowmin,i)
		document.getElementById('min'+i).style.left=x
		document.getElementById('min'+i).style.top=y
	}
	for (i=1;i<=hand_hour_length;i++) {
		getxy(nowhour,i)
		document.getElementById('hour'+i).style.left=x
		document.getElementById('hour'+i).style.top=y
	}
	var timer=setTimeout("dorotateNS()",1000)
}

Bartelmans · 6 jun 2007

Ten eerste in ieders geval hartstikke bedankt voor je tijd die je erin gestopt hebt, maar als ik deze functie toevoeg dan werkt de klok nog wel gewoon in IE maar nog niet in de andere browsers..

hackerfrans · 7 jun 2007

Onderstaande code werkt bij mij onder firefox:

Code:

<html>
<head>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style type="text/css">
v\:* { behavior: url(#default#VML); }
</style>
</head>
<body>
<script type="text/javascript"> 
<!--
var hand_sec_length=0;
var hand_min_length=60;
var hand_hour_length=45;

//Kleur instellingen
var hand_sec_color="#f0f1f1";
var hand_min_color="#da2028";
var hand_hour_color="#da2028";

var hand_sec_weight=0;
var hand_min_weight=6;
var hand_hour_weight=6;

var face_width=200;
var face_height=200;

var face_outlineweight=5;

//Kleur instellingen van de rand
var face_outlinecolor="#404041";

var face_fillcolor="#f0f1f1";

var faceform="oval";
var innercircle_width=25;
var innercircle_height=25;
var innercircle_outlineweight=5;
var innercircle_outlinecolor="#404041";
var innercircle_fillcolor="#404041";

var pi= Math.PI;
var x_sec=0;
var y_sec=0;
var x_min=0;
var y_min=0;
var x_hour=0;
var y_hour=0;
var angle=270;
var x,y;

var opera=navigator.userAgent.match(/Opera/)?1:0;
var ie5=document.getElementById&&document.all&&!navigator.userAgent.match(/Opera/)?1:0;
var ns6=document.getElementById&&!document.all&&!navigator.userAgent.match(/Opera/)?1:0;

function getxy(thistime,thisradius) {
	angle=6*parseInt(thistime)-90;
	x=(thisradius*Math.cos(angle*(pi/180)))+face_width/2;
	y=(thisradius*Math.sin(angle*(pi/180)))+face_height/2;
}

function dorotateIE() {
	var now = new Date();
	var nowsec = now.getSeconds();
	var nowmin = now.getMinutes();
	var nowhour = now.getHours();
	if (nowhour>=12) {
		nowhour-=12;
	}
	nowhour=(30*nowhour+(nowmin/2))/6;
	getxy(nowsec,hand_sec_length);
	document.getElementById('secid').to=x+","+y;
	getxy(nowmin,hand_min_length);
	document.getElementById('minid').to=x+","+y;
	getxy(nowhour,hand_hour_length);
	document.getElementById('hourid').to=x+","+y;
	var timer=setTimeout("dorotateIE()",1000);
}

function dorotateNS() {
	var now = new Date()
	var nowsec = now.getSeconds()
	var nowmin = now.getMinutes()
	var nowhour = now.getHours()
	if (nowhour>=12) {
		nowhour-=12
	}
	nowhour=(30*nowhour+(nowmin/2))/6
	for (i=1;i<=hand_sec_length;i++) {
		getxy(nowsec,i)
		document.getElementById('sec'+i).style.left=x
		document.getElementById('sec'+i).style.top=y
	}
	for (i=1;i<=hand_min_length;i++) {
		getxy(nowmin,i)
		document.getElementById('min'+i).style.left=x
		document.getElementById('min'+i).style.top=y
	}
	for (i=1;i<=hand_hour_length;i++) {
		getxy(nowhour,i)
		document.getElementById('hour'+i).style.left=x
		document.getElementById('hour'+i).style.top=y
	}
	var timer=setTimeout("dorotateNS()",1000)
}

function DL_GetElementLeft(eElement) {
    var nLeftPos = eElement.offsetLeft;          
    var eParElement = eElement.offsetParent;     
    while (eParElement != null) {                                            
        nLeftPos += eParElement.offsetLeft;      
        eParElement = eParElement.offsetParent;  
    }
    return nLeftPos;                            
}

function DL_GetElementTop(eElement) {
    var nTopPos = eElement.offsetTop;            
    var eParElement = eElement.offsetParent;     
    while (eParElement != null) {                                            
        nTopPos += eParElement.offsetTop;        
        eParElement = eParElement.offsetParent;  
    }
    return nTopPos;                              
}

function getpos(){
	document.getElementById('roof').style.left=DL_GetElementLeft(document.getElementById('marker'));
	document.getElementById('roof').style.top=DL_GetElementTop(document.getElementById('marker'));
	document.getElementById('marker').style.visibility="hidden";
	document.getElementById('roof').style.visibility="visible";
	if (ie5) {
		dorotateIE();
	}
	else {
		dorotateNS();
	}
}

if (ie5) {
	document.write('<span id="marker" style="position:relative;width:'+face_width+';height:'+face_height+'"><img width='+face_width+' height='+face_height+' src="empty.gif"></span>');
	document.write('<span id="roof" style="position:absolute;top:0px;left:0px;width:'+face_width+'px;height:'+face_height+'px;visibility:hidden">');
document.write('<v:'+faceform+' id="faceid"  strokeweight="'+face_outlineweight+'" strokecolor="'+face_outlinecolor+'" fillcolor="'+face_fillcolor+'" style="position:absolute;top:0px;left:0px;width:'+face_width+'px;height:'+face_height+'px"/>');
	document.write('<v:line id="secid"  strokeweight="'+hand_sec_weight+'" strokecolor="'+hand_sec_color+'" from="'+face_width/2+','+face_height/2+'" to="'+face_width/2+','+face_height/2+'"/>');
	document.write('<v:line id="minid"  strokeweight="'+hand_min_weight+'" strokecolor="'+hand_min_color+'" from="'+face_width/2+','+face_height/2+'" to="'+face_width/2+','+face_height/2+'"/>');
	document.write('<v:line id="hourid"  strokeweight="'+hand_hour_weight+'" strokecolor="'+hand_hour_color+'" from="'+face_width/2+','+face_height/2+'" to="'+face_width/2+','+face_height/2+'"/>');
	document.write('<v:oval id="innercircleid"  strokecolor="'+innercircle_outlinecolor+'" fillcolor="'+innercircle_fillcolor+'" style="position:absolute;top:'+(face_height/2-innercircle_height/2)+'px;left:'+(face_width/2-innercircle_width/2)+'px;width:'+innercircle_width+'px;height:'+innercircle_height+'px">');
	document.write('</v:oval>');
	document.write('</span>');
	window.onload=getpos
}

if (opera || ns6) {
	document.write('<span id="marker" style="position:relative;width:'+(hand_hour_weight+face_width)+';height:'+(hand_hour_weight+face_height)+'">')
	if (ns6) {
		document.write('<img width='+(hand_hour_weight+face_width)+' height='+(hand_hour_weight+face_height)+' src="empty.gif">')
	}
	document.write('</span>')
	document.write('<div id="roof" style="position:absolute;width:'+(hand_hour_weight+face_width)+';height:'+(hand_hour_weight+face_height)+';top:0px;left:0px;visibility:hidden">')
	for (i=1;i<=30;i++) {
		angle=12*parseInt(i)-90
		x=(face_width/2*Math.cos(angle*(pi/180)))+face_width/2
		y=(face_height/2*Math.sin(angle*(pi/180)))+face_height/2
		document.write('<div style="position:absolute;left:'+x+'px;top:'+y+'px;background-color:'+face_outlinecolor+'"><img src="empty.gif" width='+face_outlineweight+'></div>')
	}
	for (i=1;i<=hand_sec_length;i++) {
		document.write('<div id="sec'+i+'" style="position:absolute;left:0px;top:0px;background-color:'+hand_sec_color+'"><img src="empty.gif" width='+hand_sec_weight+'></div>')
	}
	for (i=1;i<=hand_min_length;i++) {
		document.write('<div id="min'+i+'" style="position:absolute;left:0px;top:0px;background-color:'+hand_min_color+'"><img src="empty.gif" width='+hand_min_weight+'></div>')
	}
	for (i=1;i<=hand_hour_length;i++) {
		document.write('<div id="hour'+i+'" style="position:absolute;left:0px;top:0px;background-color:'+hand_hour_color+'"><img src="empty.gif" width='+hand_hour_weight+'></div>')
	}
	document.write('</div>')
	window.onload=getpos
}
//-->
</script>
</body>
</html>

javascript klok

Bartelmans

Nieuwe gebruiker

hackerfrans

Terugkerende gebruiker

Bartelmans

Nieuwe gebruiker

hackerfrans

Terugkerende gebruiker

Bartelmans

Nieuwe gebruiker

hackerfrans

Terugkerende gebruiker

Nieuwste berichten

Wij waarderen jouw privacy