jobo: schneeflockenscript optimieren

Beitrag lesen

Hallo,

  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
	<head>  
	</head>  
<script type="text/javascript">  
[code lang=javascript]  
window.onload = function() {  
javascript:  
	DB=document.body;  
	DB.style.backgroundColor = "#000";  
	myStartMarginLeft = 40;  
	myDistanceBetweenFlakes = 10;  
	myFontSize = new Array;  
	/* walk from left margin to end of screen*/  
	for (i = myStartMarginLeft; i< screen.width; i += myDistanceBetweenFlakes) {  
		/*make a snowchristal*/  
		window["star"+i]=document.createTextNode("*");  
		/*put it in surrounding div, whiten it and append*/  
		window["div"+i]=document.createElement("div");  
		window["div"+i].appendChild(window["star"+i]);  
		window["div"+i].style.color="#fff";  
		DB.appendChild(window["div"+i]);  
		/* size and base-position and store for each snowflake*/  
		myFontSize[i] = Math.ceil(Math.random()*40);  
		window["div"+i].style.fontSize=myFontSize[i] + "px";  
		window["div"+i].style.position="absolute";  
		window["y"+i]=-myFontSize[i];  
		window["x"+i] = i;  
		window["div"+i].style.left=10 + window["x"+i] + "px";  
		window["div"+i].style.top= window["y"+i]+"px";  
		/* stop before bottom of window*/  
		myMarginBottom = screen.height - 150;  
		/* pixels to move for each step;*/  
		myPixelsPerStep = 1;  
		/* speed in msec*/  
		myTimeout = 10;  
		/* make for each snowflake a seperate snow-function*/  
		window["snow"+i] = function (j) {  
			if (window["y"+j] < myMarginBottom) {  
				window["y"+j] += myPixelsPerStep;  
				/* new postition, down and left/right for little sinus-swing*/  
				window["div"+j].style.top = window["y"+j] + "px";  
				window["div"+j].style.left = window["x"+j] + 2*Math.sin(window["y"+j]/5) + "px";  
			}	else {  
				window["y"+j]=myFontSize[j];  
			}  
			/* to call in setTimeout-function, will be e.g. window[snow40](40)*/  
			functionCall = 'window["snow'+j+'"]('+j+')';  
			setTimeout(functionCall,myTimeout);  
		};  
		/* call the just defined function*/  
		functionCallNow = 'window["snow'+i+'"]('+i+')';  
		/* start random*/  
		setTimeout(functionCallNow,Math.random()*50000);  
	}  
	void(0)  
	;  
}  

</script>
</head>
<body>
</body>
</html>
[/code]

erzeugt für jede Schneeflocke (*-Textnode) eine eigene Funktion (window"snow40") zB.. Es läuft aber rattenlahm.

mit

  
window.onload = function() {  
javascript:  
	DB=document.body;  
	DB.style.backgroundColor = "#000";  
	  
	/* make one function to calculate the way of each snowflake*/  
	snow = function (j) {  
		if (window["y"+j] < myMarginBottom) {  
			window["y"+j] += myPixelsPerStep;  
			/* new postition, down and left/right for little sinus-swing*/  
			window["div"+j].style.top = window["y"+j] + "px";  
			window["div"+j].style.left = window["x"+j] + 2*Math.sin(window["y"+j]/5) + "px";  
		}	else {  
			window["y"+j]=myFontSize[j];  
		}  
		/* to call in setTimeout-function, will be e.g. window[snow40](40)*/  
		functionCall = 'snow('+j+')';  
		setTimeout(functionCall,myTimeout);  
	};  
  
	myStartMarginLeft = 40;  
	myDistanceBetweenFlakes = 10;  
	myFontSize = new Array;  
	/* walk from left margin to end of screen*/  
	for (i = myStartMarginLeft; i< screen.width; i += myDistanceBetweenFlakes) {  
		/*make a snowchristal*/  
		window["star"+i]=document.createTextNode("*");  
		/*put it in surrounding div, whiten it and append*/  
		window["div"+i]=document.createElement("div");  
		window["div"+i].appendChild(window["star"+i]);  
		window["div"+i].style.color="#fff";  
		DB.appendChild(window["div"+i]);  
		/* size and base-position and store for each snowflake*/  
		myFontSize[i] = Math.ceil(Math.random()*40);  
		window["div"+i].style.fontSize=myFontSize[i] + "px";  
		window["div"+i].style.position="absolute";  
		window["y"+i]=-myFontSize[i];  
		window["x"+i] = i;  
		window["div"+i].style.left=10 + window["x"+i] + "px";  
		window["div"+i].style.top= window["y"+i]+"px";  
		/* stop before bottom of window*/  
		myMarginBottom = screen.height - 150;  
		/* pixels to move for each step;*/  
		myPixelsPerStep = 1;  
		/* speed in msec*/  
		myTimeout = 10;  
		/* call the just defined function*/  
		functionCallNow = 'snow('+i+')';  
		/* start random*/  
		setTimeout(functionCallNow,Math.random()*50000);  
	}  
	void(0)  
	;  
}  

habe ich nur eine snow-Funktion, aber besser wirds nicht.

Wie kann man das ganze optimieren, oder geht das garnicht? Wäre es schlau, eine Klasse zu bauen, mit eingebauter snow-Funktion? Oder die Sinusberechnung (horizentale Auslenkung) vorzuberechnen und in einem Array zu speichern?

Wenn man von javascript: bis void(0) das in den Arbeitsspeicher kopiert und dann in die Adressleiste kopiert und abschickt, funzt es übrigens:

javascript:DB=document.body;DB.style.backgroundColor = "#000";/* make one function to calculate the way of each snowflake*/snow = function (j) {if (window["y"+j] < myMarginBottom) {window["y"+j] += myPixelsPerStep;/* new postition, down and left/right for little sinus-swing*/window["div"+j].style.top = window["y"+j] + "px";window["div"+j].style.left = window["x"+j] + 2*Math.sin(window["y"+j]/5) + "px";} else {window["y"+j]=myFontSize[j];}/* to call in setTimeout-function, will be e.g. windowsnow40*/functionCall = 'snow('+j+')';setTimeout(functionCall,myTimeout);};myStartMarginLeft = 40;myDistanceBetweenFlakes = 10;myFontSize = new Array;/* walk from left margin to end of screen*/for (i = myStartMarginLeft; i< screen.width; i += myDistanceBetweenFlakes) {/*make a snowchristal*/window["star"+i]=document.createTextNode("*");/*put it in surrounding div, whiten it and append*/window["div"+i]=document.createElement("div");window["div"+i].appendChild(window["star"+i]);window["div"+i].style.color="#fff";DB.appendChild(window["div"+i]);/* size and base-position and store for each snowflake*/myFontSize[i] = Math.ceil(Math.random()*40);window["div"+i].style.fontSize=myFontSize[i] + "px";window["div"+i].style.position="absolute";window["y"+i]=-myFontSize[i];window["x"+i] = i;window["div"+i].style.left=10 + window["x"+i] + "px";window["div"+i].style.top= window["y"+i]+"px";/* stop before bottom of window*/myMarginBottom = screen.height - 150;/* pixels to move for each step;*/myPixelsPerStep = 1;/* speed in msec*/myTimeout = 10;/* call the just defined function*/functionCallNow = 'snow('+i+')';/* start random*/setTimeout(functionCallNow,Math.random()*50000);}void(0)

Deshalb das "void(0)" am Ende und "javascript:" am Anfang sowie die /**/-Kommentar-Variante.

Gruß

jobo