Gruppen

Top Gruppen: Windows 7; Windows Vista; Windows XP; Textverarbeitung; Excel; DSL; Internet Browser; E-Mail/Outlook
Betriebsysteme: Windows classik; Linux; BS-Sonstige
Software: Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; SW-Sonstige
Hardware: Mainboard/CPU; Grafikkarten; Peripherie; Laptop/Notebook; HW-Sonstiges
Netzwerk: Telefon,ISDN,Modem; W-Lan; NW-Sonstiges
Programmierung: PHP,ASP,Perl...; Java,C++...; Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke; SN Intern; Test

/ Forum / Skripte(PHP,ASP,Perl...)

Skripte(PHP,ASP,Perl...)

Fragevon irgendjemand vom 25.02.2022, 18:20 Options

objekt schrittweise automatisch bewegen? (javascript)

ich versuche das element "ball" schrittweise um 10px nach unten zu verschieben, bis es an einem bestimmten punkt angelangt ist. auslöser dafür soll ein onkeyup-event sein (taste egal).
und jetzt stehe ich vor dem problem, dass die von mir angewandte schleife das element so oft 10px nach unten "rechnet", wie es kann, und dann mit einem ruck das element nach ganz unten springt.
eigentlich sollen aber die schrittweisen 10px-verschiebungen einzeln ausgeführt werden. mit anderen worten: auf einer (z.b.) 100px langen strecke springt das element zur zeit einmal 100px, und fertig. es soll aber 10 mal springen, je 10px.
wie geht das?

document.onkeyup=function runter(){
var oben = document.getElementById("ball").style.top.replace("px","");
while (parseInt(oben) < 300){
document.getElementById("ball").style.top = parseInt(oben)+10;
}
}

Antwort schreiben

Antwort 1 von gast42 vom 25.02.2022, 21:00 Options

der Browser ist so optimiert, dass er derartige Darstellungsänderungen in Schleifen zusammenfasst.

Du musst das zeitlich trennen, zB. durch window.setInterval o.ä.

Übrigens fehlt bei der Zuweisung die Einheit!

Antwort 2 von irgendjemand vom 25.02.2022, 22:20 Options

wie soll das mit setInterval aussehen? ich hab es schon mal setTimeout() probiert, das hat aber nichts gebracht.

ist die einheit denn immer notwendig? die wurde bisher nämlich irgendwie automatisch ergänzt.
aber jetzt merke ich auch erst, dass das mit dem onkeyup, so wie es da steht, auch nur im firefox funktioniert.
wäre dankbar für noch mehr hinweise...

Antwort 3 von irgendjemand vom 25.02.2022, 22:30 Options

ok setInterval hab ich jetzt doch verstanden, und es geht, zumindest im FF. wie krieg ich das jetzt auch in anderen browsern zum laufen?

Antwort 4 von gast42 vom 25.02.2022, 22:39 Options

Zitat:
wie krieg ich das jetzt auch in anderen browsern zum laufen?

wenn du deinen Code vorenthältst läuft hier gar nichts

Antwort 5 von irgendjemand vom 27.02.2022, 12:07 Options

das ist der bisherige code:

document.onkeyup=function(){
aktiv = window.setInterval("runter()", 20);
}

function runter(){
var oben = document.getElementById("ball").style.top.replace("px","");
if (parseInt(oben) < 300){
document.getElementById("ball").style.top = parseInt(oben)+10+'px';
}else{
window.clearInterval(aktiv);
}
}

Antwort 6 von gast42 vom 27.02.2022, 14:59 Options

minimale Korrekturen zur Laufzeitoptimierung:

document.onkeyup=function(){
 aktiv = window.setInterval(runter, 20);
}

function runter(){
 var oben = "0"+parseInt(document.getElementById("ball").style.top,10);
 if (oben < 300){
  document.getElementById("ball").style.top = (oben+10)+'px';
 }else{
  window.clearInterval(aktiv);
 }
}

lässt sich onkeyup auf jedem Browser document zuweisen? lt. SelfHTML nicht. Probiers mal in anderen Elementen. Ansonsten gib eine genauere Problembeschreibung.

Antwort 7 von irgendjemand vom 27.02.2022, 15:54 Options

ich hab mich da etwas geirrt. das problem liegt nicht in diesem skript, sondern in folgendem (,welches den "ball" vorher nach oben heben sollte):

document.onkeypress=function(e){
var e = window.event || e;
var oben = document.getElementById("ball").style.top.replace("px","");

if (String.fromCharCode(e.charCode)=="s"){
document.getElementById("ball").style.top = parseInt(oben)-10+'px';
}

}

dieses skript funktioniert nur im FF. das problem wird hier dann wahrscheinlich der bezug auf eine bestimmte taste sein. hat jemand eine idee, wie ich das löse?

Antwort 8 von gast42 vom 28.02.2022, 08:15 Options

evnts sind in JEDEM Browser anders implementiert, deine Vorgehensweise ist Mozilla-Syntax.

Um bestimmte Tasten abzufragen empfiehlt sich die Vorgensweise bei SelfHTML:events

Antwort 9 von gast42 vom 28.02.2022, 15:49 Options

PS zur Ergänzung der o.g. Codeoptimierung:

replace("px",""); entfernt die Einheit

parseInt() liest nur die Zahl bis zum ersten Zeichen, das keine Ziffer ist.

Damit ist replace komplett überflüssig. Es handelt sich zudem um eine Methode des RegExp-Objekts und ist - da regulärer Ausdruck - somit ohnehin lahm und sollte vermieden werden.

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..