Ho modificato la funzione linea(nomeLinea,spessore,colore,orgX,orgY,lunghezza,ang) posta nella mia "libreria" (non so se la denominazione sia giusta), in modo da usare setInterval in un modo compatibile ai due browsers, con la tecnica del passare come parametro al metodo dell'oggetto che chiama la setInterval, un riferimento all'istanza dell'oggetto.
Il codice per la linea (con in rosso la funzione modificata):
function linea(nomeLinea,spessore,colore,orgX,orgY,lunghezza,ang) {
var nomeLinea=nomeLinea;
var orgX=orgX;
var orgY=orgY;
var lunghezza=lunghezza;
var angolo=ang;
var velAng;
var intervallo;
var spessore=spessore;
var linea="";
var questo=this;
this.disegna=function(){
for (var n=0;n<=lunghezza;n++){
linea+="<div id='"+nomeLinea+n+"' style='font-size:1px;position:absolute;left:"+(orgX+n*Math.cos(angolo*Math.PI/180))+"px;top:"+(orgY+n*Math.sin(angolo*Math.PI/180))+"px;background-color:"+colore+";width:"+spessore+"px;height:"+spessore+"px'></div>";
}
document.body.innerHTML+=linea;
}
this.disegna.call();
this.step=function(){
for(var n=0;n<=lunghezza;n++){
document.getElementById(nomeLinea+n).style.left=orgX+(n*Math.cos(angolo*Math.PI/180));
document.getElementById(nomeLinea+n).style.top=orgY+(n*Math.sin(angolo*Math.PI/180));
}
angolo+=velAng;
}
this.ruota=function(velocitaAngolare,tempo){
velAng=velocitaAngolare;
setInterval(function(){questo.step()},tempo);
}
}
Il codice della pagina che usa la funzione linea per creare due linee rotanti diverse:
<script src="linea.js">
</script>
<script>
function azione(){
var uno = new linea("uno",2,"green",300,300,200,45);
uno.ruota(1,1);
var due=new linea("due",1,"blue",400,300,200,0);
due.ruota(-5,1);
}
</script>
<body onLoad="azione()">
</body>
Ed ecco la pagina realizzata
Nessun commento:
Posta un commento