Avatar billede flol Nybegynder
24. oktober 2006 - 21:12 Der er 9 kommentarer og
2 løsninger

Javascript placering af Tid / Klok

<script language="javascript" type="text/javascript">
<!--  Clock by kurt.grigg@virgin.net
civCol='#000000'; //12 colour.
dotCol='#000000'; //dot colour.
hCol='#000000';  //hours colour.
mCol='#000000';  //minutes colour.
sCol='#000000';  //seconds colour.
//Alter nothing below! Alignments will be lost!
ns=(document.layers);
ns6=(document.getElementById&&!document.all);
ie=(document.all);
h=3;
m=4;
s=5;
civ='1 2 3 4 5 6 7 8 9 10 11 12';
civ=civ.split(' ');
n=civ.length;
ClockHeight=30;
ClockWidth=30;
f12="<font face='Arial' size=1 color="+civCol+">";
e=360/n;
HandHeight=ClockHeight/4;
HandWidth=ClockWidth/4;
y=0;
x=0;
if (!ns)
document.write("<div id='disp' style='position:absolute;width:50px;height:20px;text-align:center'> </div>");
else
document.write("<layer name=disp top=0 left=0></layer>");
for (i=0; i < n; i++){
if (!ns)
document.write('<div id="Civ'+i+'" style="position:absolute;width:15px;height:15px;text-align:center;color:#0000dd">'+f12+civ[i]+'</font></div>');
else
document.write('<layer name="Civ'+i+'" width=15 height=15><center>'+f12+civ[i]+'</font></center></layer>');
}
for (i=0; i < n; i++){
if (!ns)
document.write('<div id="D'+i+'" style="position:absolute;width:2px;height:2px;font-size:2px;background:'+dotCol+'"></div>');
else
document.write('<layer name="D'+i+'" bgcolor='+dotCol+' width=2 height=2></layer>');
}
for (i=0; i < h; i++){
if (!ns)
document.write('<div id="H'+i+'" style="position:absolute;width:2px;height:2px;font-size:2px;background:'+hCol+'"></div>');
else
document.write('<layer name="H'+i+'" bgcolor='+hCol+' width=2 height=2></layer>');
}
for (i=0; i < m; i++){
if (!ns)
document.write('<div id="M'+i+'" style="position:absolute;width:2px;height:2px;font-size:2px;background:'+mCol+'"></div>');
else
document.write('<layer name="M'+i+'" bgcolor='+mCol+' width=2 height=2></layer>');
}
for (i=0; i < s; i++){
if (!ns)
document.write('<div id="S'+i+'" style="position:absolute;width:2px;height:2px;font-size:2px;background:'+sCol+'"></div>');
else
document.write('<layer name="S'+i+'" bgcolor='+sCol+' width=2 height=2></layer>');
}

function ClockAndAssign(){
var _d=(ns||ie)?'document.':'document.getElementById("';
var _a=(ns||ns6)?'':'all.';
var _n6r=(ns6)?'")':'';
var _s=(ns)?'':'.style';
time=new Date();
secs=time.getSeconds();
sec=-1.57+Math.PI*secs/30;
mins=time.getMinutes();
min=-1.57+Math.PI*mins/30;
hr=time.getHours();
hrs=-1.575+Math.PI*hr/6+Math.PI*parseInt(time.getMinutes())/360;
ampm=(hr>11)?"PM":"AM";
y=(ie)?document.body.scrollTop+window.document.body.clientHeight-ClockHeight*2:window.pageYOffset+window.innerHeight-ClockHeight*2;
x=(ie)?document.body.scrollLeft+window.document.body.clientWidth-ClockWidth*2:window.pageXOffset+window.innerWidth-ClockWidth*2.4;
var Dsp=eval(_d+_a+"disp"+_n6r+_s);Dsp.top=y-17;Dsp.left=x-24;
for (i=0; i < s; i++){var d1=eval(_d+_a+"S"+i+_n6r+_s);d1.top=y+(i*HandHeight)*Math.sin(sec);d1.left=x+(i*HandWidth)*Math.cos(sec)}
for (i=0; i < m; i++){var d2=eval(_d+_a+"M"+i+_n6r+_s);d2.top=y+(i*HandHeight)*Math.sin(min);d2.left=x+(i*HandWidth)*Math.cos(min)}
for (i=0; i < h; i++){var d3=eval(_d+_a+"H"+i+_n6r+_s);d3.top=y+(i*HandHeight)*Math.sin(hrs);d3.left=x+(i*HandWidth)*Math.cos(hrs)}
for (i=0; i < n; i++){var d4=eval(_d+_a+"D"+i+_n6r+_s);d4.top=y+ ClockHeight*Math.sin(-1.0471+i*e*Math.PI/180);d4.left=x+ ClockWidth*Math.cos(-1.0471+i*e*Math.PI/180)}
for (i=0; i < n; i++){var d5=eval(_d+_a+"Civ"+i+_n6r+_s);d5.top=y-6+ClockHeight*1.4*Math.sin(-1.0471+i*e*Math.PI/180);d5.left=x-6+ClockWidth*1.4*Math.cos(-1.0471+i*e*Math.PI/180)}
setTimeout('ClockAndAssign()',100);
if (ie)disp.innerHTML='<font face=Arial size=6 color='+ampmCol+'>'+ampm+'</font>';
if (ns){
document.disp.document.open();
document.disp.document.write('<font face=Arial size=6 color='+ampmCol+'>'+ampm+'</font>');
document.disp.document.close();
}
}
function aorp(){
if (ns6)
document.getElementById("disp").innerHTML='<font face=Arial size=6 color='+ampmCol+'>'+ampm+'</font>';
setTimeout('aorp()',60000);
}
ClockAndAssign();
if (ns6)aorp();
//-->
</script>
----------------------------------------------------------------

I denne kode ville en klok komme frem fast låst i højre hjørne,
men jeg vil gerne ha at den skal placeres hvor jeg har lyst, nogen der kan hjælpe mig med det ?? :)
Avatar billede thesurfer Nybegynder
24. oktober 2006 - 22:42 #1
X og Y koordinaterne står her:

y=(ie)?document.body.scrollTop+window.document.body.clientHeight-ClockHeight*2:window.pageYOffset+window.innerHeight-ClockHeight*2;
x=(ie)?document.body.scrollLeft+window.document.body.clientWidth-ClockWidth*2:window.pageXOffset+window.innerWidth-ClockWidth*2.4;

Eksempel (ca i midten af skærmen, og lidt ned):

y=200;
x=600
Avatar billede thesurfer Nybegynder
24. oktober 2006 - 22:46 #2
Svar.
Avatar billede flol Nybegynder
24. oktober 2006 - 23:04 #3
hmm tænkte på om man så ikke kunne lave den med fx:
y=80
x=300
så det passer i alle opløsninger ?
Avatar billede thesurfer Nybegynder
24. oktober 2006 - 23:24 #4
I alle opløsninger?: Ja.
I alle browsere?: Muligvis.. der kan opstå problemer, da de forskellige browsere har forskellige inde-værdier..

Jeg tror at det hele er iorden, hvis du bruger:

<style type="text/css">
html,body
{
margin:0px;
padding:0px;
}
</script>

Det skal bare stå mellem "<head>" og "</head>"..
Avatar billede thesurfer Nybegynder
24. oktober 2006 - 23:26 #5
Der kan være en smule forskel i placeringen, i de forskellige browsere..

Men jeg tror at position:absolute og faste X og Y værdier, giver nogenlunde samme billede i de fleste browsere..
Avatar billede flol Nybegynder
25. oktober 2006 - 08:58 #6
det skal være sådan at den er på et bestemt sted på min hjemmesiden.

eksempel:
siden : http://flol.gratisside.dk/handsontime/handsontime.htm

der ser man uret, og det skulle gerne sidde oppe i logoet i venstre side men det gør den jo ikke i alle Browsere, jeg vil gerne hvis man kunne fastgøre den så den præcis er i det hjørne ved alle browsere...?
Avatar billede thesurfer Nybegynder
27. oktober 2006 - 11:40 #7
Jeg beklager at jeg ikke har fået kigget på det endnu.. Jeg har haft travlt med projekt i skolen, så det er begrænset hvad jeg har kigget på, af Eksperten-relaterede projekter.

Jeg håber på at få kigget på det i dag..
Avatar billede thesurfer Nybegynder
29. oktober 2006 - 01:02 #8
Hmm... Den er nok lidt svær..

Den nemmeste, vil jeg mene, er at have uret i en iframe, som du så placerer hvor du vil..
Avatar billede flol Nybegynder
31. oktober 2006 - 13:39 #9
jaa det er super det gør jeg ;D
tak for idén ..
------------------------------------
lig et Svar!
Avatar billede thesurfer Nybegynder
31. oktober 2006 - 14:36 #10
Det gør jeg så :-)
Avatar billede thesurfer Nybegynder
07. november 2006 - 20:39 #11
Du mangler at markere mit navn i boksen til venstre, og derefter klikke på Accepter-knappen.. :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester