• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] array index erhöhen

T

timholz

New member
Hallo Zusammen

Ich beschäftige mich nur zeitweise mit Javascript.
Gegenwärtig arbeite ich an einer Animation, welche nicht schlecht funktioniert.
In meiner Funktion habe ich einen Array mit Worten, die ich gegenwärtig folgendermassen auslese:
Code: 
var textArray = ['Technik','Jeger','Türen','Tore','Ladetechnik','Montage','Industrietore','Garagentore','Technik','Tore','Ladetechnik','Montage','Industrietore'];
var randomNumbertext = Math.floor(Math.random()*textArray.length);
Bei jedem timeout wird ein zufällig gewähltes Wort aus der Liste genommen.

Wie kann ich jetzt die Liste von 0 bis textArray.length durcharbeiten und den Text sinnvoller darstellen?
Also bei jedem timeout wird der Index um 1 erhöht und am Ende der List wieder auf Null gesetzt.
Ich hab die gängigen Loops ausprobiert, aber die hecheln immer gleich durch die ganze Liste.

Besten Dank für euer Interesse.

Mit freundlichen Grüssen
 
Zeig' uns doch mal deinen kompletten Code.

PS: Mit einer Schleife wird das gar nicht funktionieren, da die einfach komplett durchgelaufen wird und der Browser dazwischen nicht rendert. Damit kannst du also gar keine Animationen erstellen.
 
Hallo Klasper

Danke für die Nachricht.
War zwischenzeitlich beim Nachtmahl.
Hier ist mein Skript. Ist alles noch ein bisschen wild:
Code: 
function hintergrundAnim(){

//Höhe des Elements
var y = Math.round((Math.floor(Math.random()*jQuery('.testdiv').height()))/2.5);

//Breite des Elements
var min2 = 0;
var max2 = jQuery('.testdiv').width();

var random2 = Math.floor(Math.random() * (max2 - min2 + 1)) + min2;
function generateRandX () {
	var min2 = 0;
	var max2 = jQuery('.testdiv').width();
	var random2 = Math.floor(Math.random() * (max2 - min2 + 1)) + min2;
	return random2;
	}
var x = Math.round(random2/2);

/*---------------------------------*/
var minHoehe = 150;
var maxHoehe = 350;
//console.log(max2);
var random3 = Math.floor(Math.random() * (maxHoehe - minHoehe + 1)) + minHoehe;
function generateRandX3 () {
	var minHoehe = 150;
	var maxHoehe = 350;
	var randomHoehe = Math.floor(Math.random() * (maxHoehe - minHoehe + 1)) + minHoehe;
	return randomHoehe;
	}
var hoeheY = randomHoehe;
//console.log(hoeheY);

/*-1 oder 1*/
var plusOrMinus = (Math.round(Math.random()) * 2 - 1);
/*-winkel*/
//var winkelArray = ['-180','-90','90','180'];//eigentlich höhe
//var randomWinkel = Math.floor(Math.random()*winkelArray.length);
/*winkel mit -1 oder 1 multiplizieren*/
//var winkel = plusOrMinus*winkelArray[randomWinkel];
var winkel = plusOrMinus*90;

var yval = (0.5 * (Math.floor(Math.random() * 200) - 50)) ;
var xval = (0.5 * (Math.floor(Math.random() * 200) - 50)) ;
var xweg = Math.floor(Math.random() * 200);
var yweg = Math.floor(Math.random() * 200);
var time1 = 2000;
var time2 = 5000;
var timeout = 2500;
var tuerArray = ['','','','','','','','','','','',''];
			var randomNumber = Math.floor(Math.random()*tuerArray.length);
var tuerBreite = ['100','125','150','175','180','200','230','270','275'];//eigentlich höhe
var randomBreite = Math.floor(Math.random()*tuerBreite.length);
var tuerHoehe = ['125','275','150','175','200','225','250','300','350','400','450','500'];
var randomHoehe = Math.floor(Math.random()*tuerHoehe.length);	
var tuerTop = ['-200','-180','-160','-120','-100','-50','0','50','100','120','160','180','200','220'];
var randomLeft = Math.floor(Math.random()*tuerTop.length);
var tuerLeft = ['-200','-180','-160','-120','-100','-50','0','50','100','120','160','180','200','220'];
var randomTop = Math.floor(Math.random()*tuerTop.length);	

var tuerPersX = ['-80','-75','-60','-45','-30','-15','0','0','0','15','30','45','60','75','80'];
var randomPersX = Math.floor(Math.random()*tuerPersX.length);	
//console.log(tuerPersX[randomPersX]+'X');

var testY = 0;

if (randomPersX == 6 || randomPersX == 7 || randomPersX == 8){
	var testY = 60;
	//var tuerPersY = ['-90','-75','-60','-45','-30','-15','0','15','30','45','60','75','90'];
//var randomPersY = Math.floor(Math.random()*tuerPersX.length);	
//console.log(tuerPersY[randomPersY]+'Y');
console.log(testY);
	}
	else{
	var testY = 0;	
		}
	

var animelement = jQuery('<div class="animelement">'+  tuerArray[randomNumber] + '</div>').appendTo('.perspective').hide();

if (!jQuery.support.transition){				
	animelement.css({
	'z-index':1,
	'top': tuerTop[randomTop]+'%',	//offsets
	'left': tuerLeft[randomLeft]+'%', //offsets
	'opacity': 0.8,
	'filter': 'alpha(opacity=80)'

	}).show().animate({
	'opacity': 0.4,
	'filter': 'alpha(opacity=40)',
	'top': y+yval,	//offsets
	'left': x+yval
	
	},time1).animate({

	'top': y-yweg,	//offsets
	'left': x-xweg							
	},time2).fadeOut(700,function(){jQuery(this).remove();
    });
	window.setTimeout('hintergrundAnim()',timeout);
	}//ende if

	else{
	animelement.css({
	'z-index':1,
	top: tuerTop[randomTop]+'%',	//offsets
	left: tuerLeft[randomLeft]+'%', //offsets
	 opacity: 0,
     width: x,	//offsets
	 height: y //offsets
	}).show().transition({
	opacity: 0.5,
	'filter': 'alpha(opacity=40)',
	top: -100+'%',	//offsets
	left: -100+'%',
	width: tuerBreite[randomBreite]+'%',	//eigetlich höhe
	height: tuerHoehe[randomHoehe]+'%', //eigentlich breite
	'border-width':0.5+'em',
	'border-color':'#'+505050,
	'border-style':'solid',
    //'transform': 'rotate('+ winkel +'deg)',
	 rotate: +winkel+'deg',
	 perspective: '800px',
  	 rotateX: +tuerPersX[randomPersX]+'deg',
	 rotateY: +testY+'deg'
	//'transform': 'rotateX('+tuerPersX[randomPersX]+'deg) rotateY('+testY+'deg)'
	
	},time1).transition({
	'border-width':0.25+'em',
	'border-color':'#'+505050,
	'border-style':'solid',
	top: tuerTop[randomTop]+'%',	//offsets
	left: tuerLeft[randomLeft]+'%',
	width: 50+'%',	//offsets
	height: hoeheY+'%',//x+y3, //offsets
	rotateX: +0+'deg',
	rotateY: +0+'deg'
	},time2).fadeOut(700,function(){jQuery(this).remove();
    });
	window.setTimeout('hintergrundAnim()',timeout);
	}//ende else
	}//ende funtion// JavaScript Document
	


/*call hintergrundAnim*/
(function($) {
$(function() {

	   hintergrundAnim();

});
})(jQuery);


viele Grüsse
theo

- - - Aktualisiert - - -

Sorry, ich meinte kkapsner.


hallo

Ich habs mal mit dieser Funktion probiert. Ist schon besser.
Code: 
var counter = 0;
function zaehler(){
    if (counter < 11){
        counter++
		console.log(counter+' mal');
        window.setTimeout(zaehler, 2500);
    }
	else if((counter == 11)){
		counter = 0;
		window.setTimeout(zaehler, 2500);
		}
}
zaehler();
Mit der Variable counter kann ich jetzt durch das Array pflügen.

viele Grüsse
theo
 
Zuletzt bearbeitet:
timholz schrieb:
Ist alles noch ein bisschen wild
Zum Vergrößern anklicken....
Stimmt - du solltest dir dringend angewöhnen, deinen Code sauber zu formatieren. Macht das Lesen/Verstehen/Verwalten des Codes viel einfacher.
timholz schrieb:
Sorry, ich meinte kkapsner.
Zum Vergrößern anklicken....
Kein Problem.
timholz schrieb:
Ich habs mal mit dieser Funktion probiert. Ist schon besser.
Zum Vergrößern anklicken....
Sieht nicht schlecht aus, ABER sind counter und zaehler globale Variablen? Wenn ja, ist das extrem gefährlich, da solche Variablennamen ja durchaus öfters verwendet werden und man damit sehr schnell dieses Skript durch ein anderes zerschießt. Besser ist es, gar keine globalen Variablen zu verwenden. Auch würde ich die "11" nicht fest in den Quelltext reinschreiben, sondern da einfach die Länge des Arrays abfragen.
 
Hi kkapsner

Danke für dein Feedback. Ja, vorläufig sind counter und zaehler noch global, das heisst, sind einfach oben, ausserhalb meiner Animationsfunktion. Sonst stehen sie ja nicht zur Verfügung und eine Fehlermeldung counter nicht definiert wird ausgegeben.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben