[Javascript] Lauftext Problem

[SFDrake1904]

Moin!

Also folgendes:

var x = parseFloat(document.getElementById("quad").style.left);
	while(x <= 1000.0) {
	    x = x + 0.5;
     	    document.getElementById("quad").style.left = x;
	}

Das ist der erste Teil von meinem Script (beim zweiten bewegt sich das Objekt wieder zurück). Das Problem ist, dass sich das Objekt (in meinem Fall zu testzwecken einfach nurn Quadrat) zwar an die Endposition begibt, aber die eigentliche Bewegung nicht aufm Bildschirm sichtbar ist.

Ich steh im Moment echt aufm Schlauch, weiß einer von euch was ich vergessen hab?

MfG
Drake

 

[Cid XIII]

Das Problem ist ganz simpel, du erhöhst zwar den X-Wert bei jedem Schleifendurchlauf,
allerdings verlässt du dabei die Funktion nicht! Die Schleife läuft solange bis x = 1000 ist,
und solange die Funktion läuft wird auf der Seite nichts aktualisiert.

Also mach x global (falls es das nicht schon ist) und schreibe eine Funktion, die den Wert jeweils erhöht. Außerdem musst du das ganze zeitlich einschränken, denn wenn du direkt nacheinander x erhöhst wird die Bewegung so schnell, dass du sie kaum siehst (je nach der Leistungsfähigkeit deines Computers natürlich).

/*
 id - ID des HTML-Elements
 dx - Anzahl der Pixel pro Einheit
 tu - Zeiteinheit (Abstand zwischen Bewegungen) in ms
 max - Zielwert
*/
function scroll(id, dx, tu, max)
{
 var obj = document.getElementById(id);
 var current_x = parseInt(obj.style.left);

 obj.style.left = current_x + dx;

 if( Math.abs(parseInt(obj.style.left)) < Math.abs(max) )
 {
  // Funktion in tu Milisekunden wieder aufrufen
  window.setTimeout("scroll('" + id + "'," + dx + "," + tu + "," + max + ")", tu);
 }
}

// Beispielaufruf: HTML-Element mit ID "lauftext", 250ms, 4 Pixel pro Zeiteinheit, bis 1000 Pixel erreicht
scroll("lauftext", 4, 250, 1000);

Habe den Code jetzt nicht getestet, aber so in der Art.