Ergebnis 1 bis 5 von 5
  1. #1
    timholz ist offline Grünschnabel
    registriert
    19-03-2015
    Beiträge
    8

    array index erhöhen

    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

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.627

    AW: array index erhöhen

    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.

  3. #3
    timholz ist offline Grünschnabel
    registriert
    19-03-2015
    Beiträge
    8

    AW: array index erhöhen

    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
    Geändert von timholz (20-03-2015 um 16:42 Uhr)

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.627

    AW: array index erhöhen

    Zitat Zitat von timholz Beitrag anzeigen
    Ist alles noch ein bisschen wild
    Stimmt - du solltest dir dringend angewöhnen, deinen Code sauber zu formatieren. Macht das Lesen/Verstehen/Verwalten des Codes viel einfacher.
    Zitat Zitat von timholz Beitrag anzeigen
    Sorry, ich meinte kkapsner.
    Kein Problem.
    Zitat Zitat von timholz Beitrag anzeigen
    Ich habs mal mit dieser Funktion probiert. Ist schon besser.
    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.

  5. #5
    timholz ist offline Grünschnabel
    registriert
    19-03-2015
    Beiträge
    8

    AW: array index erhöhen

    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.

Ähnliche Themen

  1. Variable als Index für Array
    Von stash im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 27-11-2009, 14:33
  2. 2D-Array Index-Problem, please Help!
    Von Okyo im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 24-05-2009, 12:13
  3. array.length bei string index
    Von Dulla_Po im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 28-02-2008, 13:34
  4. Array in while() Schleife erhöhen
    Von enjoi.CO im Forum Serverseitige Programmierung
    Antworten: 7
    Letzter Beitrag: 27-10-2005, 15:25
  5. array index löschen
    Von Backware im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 11-11-2004, 14:11

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •