Virág Design - G-Portál

AJÁNLOM AZ OLDALT

analóg óra demó és kód

analóg óra demó és kód:

Demó:

kód:

<html>

<head>

<title>Orologio dinamico</title>

<p>

</p>

<!-- Fase 1 ....

Copia quanto segue ed inseriscilo in body esattamente dove vuoi che si visualizzi l'orologio.

/*Free JavaScripts at http://www.ScriptBreaker.com */

/*Nella riga sottostante setti il colore dello sfondo,del bordo,lo spessore e lo stile del bordo.

Se desideri usare uno sfondo inserisci background="tuosfondo.estensione" al posto della dichiarazione di colore *//-->

<tr>

fCol='000000'; /* colore dei numeri */

sCol='ff0000'; /* colore della lancetta dei secondi */

mCol='000000'; /* colore della lancetta dei minuti */

hCol='000000'; /* colore della lancetta delle ore */

ClockHeight=40; /* altezza orologio */

ClockWidth=40; /* larghezza orologio */

ClockFromMouseY=0; /********************* non occorre settare altro *****************/

ClockFromMouseX=50;

date=new Date();

day=date.getDate();

year=date.getYear();

if (year < 2000) year=year+1900;

H='...';

H=H.split('');

M='....';

M=M.split('');

S='.....';

S=S.split('');

Face='1 2 3 4 5 6 7 8 9 10 11 12';

font='Arial';

size=1;

speed=0.6;

ns=(document.layers);

ie=(document.all);

ge = (document.getElementById);

Face=Face.split(' ');

n=Face.length;

a=size*10;

ymouse=0;

xmouse=0;

scrll=0;

props="<font face="+font+" size="+size+" color="+fCol+"><B>";

Split=360/n;

HandHeight=ClockHeight/4.5

HandWidth=ClockWidth/4.5

HandY=-7;

HandX=-2.5;

scrll=0;

step=0.06;

currStep=0;

y=new Array();x=new Array();Y=new Array();X=new Array();

for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}

if (ns){

for (i=0; i < n; i++)

document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');

for (i=0; i < S.length; i++)

document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');

for (i=0; i < M.length; i++)

document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');

for (i=0; i < H.length; i++)

document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');

}

if (ie || ge) {

document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i=0; i < n; i++)

document.write('<div id="ieFace'+i+'" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</B></font></div>');

document.write('</div></div>');

document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i=0; i < H.length; i++)

document.write('<div id="ieHours'+i+'" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');

document.write('</div></div>');

document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i=0; i < M.length; i++)

document.write('<div id="ieMinutes'+i+'" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');

document.write('</div></div>')

document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i=0; i < S.length; i++)

document.write('<div id="ieSeconds'+i+'" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');

document.write('</div></div>')

}

function ClockAndAssign(){

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;

for (i=0; i < n; i++){

var F=(ns)?document.layers['nsFace'+i]:(ie)?document.all['ieFace'+i].style:document.getElementById("ieFace"+i).style;

F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180);

F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);

}

for (i=0; i < H.length; i++){

var HL=(ns)?document.layers['nsHours'+i]:(ie)?document.all['ieHours'+i].style:document.getElementById("ieHours"+i).style;

HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs);

HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);

}

for (i=0; i < M.length; i++){

var ML=(ns)?document.layers['nsMinutes'+i]:(ie)?document.all['ieMinutes'+i].style:document.getElementById("ieMinutes"+i).style;

ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min);

ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);

}

for (i=0; i < S.length; i++){

var SL=(ns)?document.layers['nsSeconds'+i]:(ie)?document.all['ieSeconds'+i].style:document.getElementById("ieSeconds"+i).style;;

SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec);

SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);

}

currStep-=step;

}

function Delay(){

y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);

x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);

for (i=1; i < n; i++){

y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);

x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}

ClockAndAssign();

setTimeout('Delay()',20);

}

if (ns||ie||ge)window.onload=Delay;

</script>

</div></td></tr></table>

<!-- Fine fase 1...

Non occorre fare altro -->

</center>

(Ha valami nem megy szólj és segítek. virag-78@gportal.hu )

Készült:2017.04.02.

Oldal információ

Portálépítés és portáldíszítés kezdőknek és haladóknak! Rengetek leírás, JavaScriptek , CSS ,HTML kódok,Naptár,Design! E-mail:virag-78@gportal.hu Tárhely: gportal.hu Kategoria:Portálépítés Indulás:2005.04.12. URL: jegvirag.gportal.hu Facebook: Virág Design Szerkeszto/Design:Virág