HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ? |
 |
|

31-08-2011, 10:00
|
Parayia
Registrierter Benutzer
|
|
Registriert seit: Aug 2011
Beiträge: 23
|
|
setInterval global
Halli Hallo ich hab ein Problem mit meinen Intervallen.
Und zwar code ich ein Auto mit javascript und hab bisher für jede fahrtrichtung einen eigenen Intervall das soll sich ändern sodass ich nur noch einen interval haben der das ganze steuert. die jeweiligen funktionen die in den setInterval angegeben werden steuern die jeweilige richtung.
Code:
var x = 50; //variable für die x-achse
var y = 50; //variable für die y-achse
var t = 8; //variable für die Zeit
var b = "url(images/rechts.png)"; //variable für den Background des Bereichs
function go(anweisung)
{
if(anweisung == "rechts")
{
move = setInterval("rechts()",40);
}
if(anweisung == "links")
{
move = window.setInterval("links()", 40);
}
if(anweisung == "runter")
{
move = window.setInterval("runter()", 40);
}
if(anweisung == "rauf")
{
move = window.setInterval("rauf()", 40);
}
if(anweisung =="right")
{
move = window.setInterval("right()", 40);
}
if(anweisung=="turbo")
{
t = t + 10;
}
if(anweisung == "slow")
{
t = t - 5;
}
else if(anweisung == "stop")
{ window.clearInterval (move);}
}
|

31-08-2011, 10:11
|
 |
ApoY2k
Registrierter Benutzer
|
|
Registriert seit: Nov 2006
Beiträge: 359
|
|
Und was genau ist jetzt dein Problem? Und wehe du sagst "Funktioniert nicht"...
__________________
This is what happens when an unstoppable force meets an immovable object.
|

31-08-2011, 10:15
|
Parayia
Registrierter Benutzer
|
|
Registriert seit: Aug 2011
Beiträge: 23
|
|
es funktioniert ja soweit wie ichs geschrieben hab das ist ja nicht das problem ^^ sondern das problem ist das jedes mal ein neuer interval gestartet wird, und ich einen einzigen interval haben möchte für alle richtungen.
zumindest laut meinem lieben arbeit geber.
Ich clear ja den interval jedes mal bevor ich die richtung änder .. aber ich will halt nur EINEN interval für ALLE richtungen haben und nicht für jede richtung einen interval
werd einfach mal den restlichen code dazu posten. vllt versteht mans dann besser.
Code:
function rauf(){
if (y > 50)
{
y = y - t;
b = "url(images/rauf.png)";
document.getElementById("auto").style.top = (y + "px");
document.getElementById("auto").style.backgroundImage= b;
} }
function runter(){
if (y < 450 )
{
y = y + t;
b = "url(images/runter.png)";
document.getElementById("auto").style.top = (y + "px");
document.getElementById("auto").style.backgroundImage= b;
}}
function links(){
if (x > 20)
{
x = x - t;
b = "url(images/links.png)";
document.getElementById("auto").style.left = (x + "px");
document.getElementById("auto").style.backgroundImage = b;
}}
function rechts(){
if (x < 1400)
{
x = x + t;
b = "url(images/vor.png)"; // setzt den hintergrund des bereichs für das auto fest
document.getElementById("auto").style.left = (x + "px");
document.getElementById("auto").style.backgroundImage = b;
}}
function right(){
x = x + t;
b = "url(images/rechts.png)";
document.getElementById("auto").style.left = (x + "px");
document.getElementById("auto").style.backgroundImage = b;
}
function buttonrechts() // die funktion fragt ab wie das auto gerade steht und je nachdem wie es steht wird die richtung verändert beim drücken des buttons
{
if(b=='url(images/rechts.png)'){go('rechts');}
if(b=='url(images/vor.png)'){window.clearInterval(move); go('runter');}
if(b=='url(images/runter.png)'){window.clearInterval(move);go('links');}
if(b=='url(images/links.png)'){window.clearInterval(move);go('rauf');}
if(b=='url(images/rauf.png)'){window.clearInterval(move);go('rechts');}
}
function buttonlinks()
{
if(b=='url(images/vor.png)'){window.clearInterval(move);go('links');}
if(b=='url(images/links.png)'){window.clearInterval(move);go('runter');}
if(b=='url(images/runter.png)'){window.clearInterval(move);go('right');}
if(b=='url(images/rechts.png)'){window.clearInterval(move);go('rauf');}
if(b=='url(images/rauf.png)'){window.clearInterval(move);go('links');}
}
Geändert von Parayia (31-08-2011 um 10:30 Uhr)
|

31-08-2011, 11:00
|
boeserfrosch
Registrierter Benutzer
|
|
Registriert seit: Nov 2009
Beiträge: 93
|
|
Dann übergib doch in deinem Intervall der auf zu rufenden Funktion einen parameter in welche Richtung es gehen soll und in der Funktion machst du dann ne Fallunterscheidung.
also sowas wie:
Code:
go(anweisung) {
if(anweisung == "rechts" ||
anweisung == "links" || anweisung == "runter" || anweisung == "rauf" || anweisung == "right")
{
move = window.setInterval("moveto('"+anweisung+")", 40);
}
}
moveto(richtung)
{
switch(richtung)
{
case "links":
if (x > 20)
{
x = x - t;
b = "url(images/links.png)";
document.getElementById("auto").style.left = (x + "px");
document.getElementById("auto").style.backgroundImage = b;
}
break;
case "rechts":
if (x < 1400)
{
x = x + t;
b = "url(images/vor.png)"; // setzt den hintergrund des bereichs für das auto fest
document.getElementById("auto").style.left = (x + "px");
document.getElementById("auto").style.backgroundImage = b;
}
break;
case "rauf":
if (y > 50)
{
y = y - t;
b = "url(images/rauf.png)";
document.getElementById("auto").style.top = (y + "px");
document.getElementById("auto").style.backgroundImage= b;
}
break;
case "runter":
if (y < 450 )
{
y = y + t;
b = "url(images/runter.png)";
document.getElementById("auto").style.top = (y + "px");
document.getElementById("auto").style.backgroundImage= b;
}
break;
case "right":
x = x + t;
b = "url(images/rechts.png)";
document.getElementById("auto").style.left = (x + "px");
document.getElementById("auto").style.backgroundImage = b;
break;
}
}
|

31-08-2011, 11:20
|
Parayia
Registrierter Benutzer
|
|
Registriert seit: Aug 2011
Beiträge: 23
|
|
hab das ganze jetzt mal eingebaut ... aber immer wenn ich jetzt bei onclick = go('rechts') mache ... gibt er mir 50000000000000000000 jahre lang den fehler aus das rechts not defined ist
soweit der code des JS
Code:
var x = 50; //variable für die x-achse
var y = 50; //variable für die y-achse
var t = 8; //variable für die Zeit
var b = "url(images/rechts.png)"; //variable für den Background des Bereichs
function go(anweisung) {
if(anweisung == "rechts" ||
anweisung == "links" ||
anweisung == "runter" ||
anweisung == "rauf" ||
anweisung == "right"){
move = window.setInterval("moveto("+anweisung+")", 40);
} }
function moveto(richtung)
{
switch(richtung)
{
case "links":
if (x > 20) {
x = x - t;
b = "url(images/links.png)";
document.getElementById("auto").style.left = (x + "px");
document.getElementById("auto").style.backgroundImage = b;
}
break;
case "rechts":
if (x < 1400)
{
x = x + t;
b = "url(images/vor.png)";
document.getElementById("auto").style.left = (x + "px");
document.getElementById("auto").style.backgroundImage = b; }
break;
case "rauf":
if (y > 50) {
y = y - t;
b = "url(images/rauf.png)";
document.getElementById("auto").style.top = (y + "px");
document.getElementById("auto").style.backgroundImage= b; }
break;
case "runter":
if (y < 450 ) {
y = y + t;
b = "url(images/runter.png)";
document.getElementById("auto").style.top = (y + "px");
document.getElementById("auto").style.backgroundImage= b; }
break;
}
}
function buttonrechts() // die funktion fragt ab wie das auto gerade steht und je nachdem wie es steht wird die richtung verändert beim drücken des buttons
{
if(b=='url(images/rechts.png)'){go('rechts');}
if(b=='url(images/vor.png)'){go('runter');}
if(b=='url(images/runter.png)'){go('links');}
if(b=='url(images/links.png)'){go('rauf');}
if(b=='url(images/rauf.png)'){go('rechts');}
}
function buttonlinks()
{
if(b=='url(images/vor.png)'){go('links');}
if(b=='url(images/links.png)'){go('runter');}
if(b=='url(images/runter.png)'){go('right');}
if(b=='url(images/rechts.png)'){go('rauf');}
if(b=='url(images/rauf.png)'){go('links');}
}
Dazu dann passend der code des HTML docs
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ferngesteuertes Auto</title>
<script src="starts.js" type="text/javascript"></script>
<link rel="stylesheet" href="cardesign.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<div id="steuer">
<input type="button" name="Right" value="Right" onclick= "buttonrechts()"> <!--bei click auf den Button rechts wird die funktion buttonrechts() ausgeführt.das auto fährt nach rechts-->
<input type="button" name="Left" value="Left" onclick= "go('links')" > <!--bei click auf den Button links wird die funktion buttonlinks() ausgeführt. das auto fährt nach links-->
<input type="button" name="Stop" value="Stop" onclick= "go('stop')"> <!--bei click auf den Button Stop wird die funktion Stop() ausgeführt die alle intervalle stopt-->
<input type="button" name="Down" value="Down" onclick= "go('runter')">
<input type="button" name="Up" value="Up" onclick= "go('rauf')">
<input type="button" name="Turbo" value="Turbo" onclick= "go('turbo')"> <!--bei click auf den Button Turbo wird die funktion turbo() ausgeführt und das auto fährt schneller-->
<input type="button" name="Slow" value="Slow" onclick= "go('slow')"> <!-- bei click auf den button slow wird die funktion slow() ausgeführt und das auto fährt langsamer-->
</div>
<div id="fahren"><!-- Bereich in dem das Auto sich bewegt-->
</div>
<div id="auto"><!--Bereich des Autos-->
</div>
</body>
</html>
|

31-08-2011, 11:23
|
boeserfrosch
Registrierter Benutzer
|
|
Registriert seit: Nov 2009
Beiträge: 93
|
|
Wird dir auch ne Zeile angegeben wo der Fehler auftritt?
ach und setzte ggf einfache anführungszeichen im setInterval um "+anweisung+"
Geändert von boeserfrosch (31-08-2011 um 11:25 Uhr)
|

31-08-2011, 11:25
|
Parayia
Registrierter Benutzer
|
|
Registriert seit: Aug 2011
Beiträge: 23
|
|
ja wohl hab mal die komplette fehlermeldung genommen ^^
rechts is not defined
[IMG]chrome://firebug/content/blank.gif[/IMG] move = window.setInterval("moveto("+anweisung+")", 40); starts. js (Zeile 12)
Ich seh den fehler nur irgendwie nicht ...
|

31-08-2011, 11:27
|
boeserfrosch
Registrierter Benutzer
|
|
Registriert seit: Nov 2009
Beiträge: 93
|
|
Hast du das noch mitbekommen?
Zitat:
Zitat von boeserfrosch
ach und setzte ggf einfache anführungszeichen im setInterval um "+anweisung+"
|
|

31-08-2011, 11:28
|
Parayia
Registrierter Benutzer
|
|
Registriert seit: Aug 2011
Beiträge: 23
|
|
ja hab ich gemacht ... hab das ganze auch komplett umgedreht also bei "+anweisung+" und sonst einfache ... wenn ich das mache kommt zwar der Fehler nicht mehr ... aber es bewegt sich auch nix ^^
die if abfrage die ich ganz unten stelle ... bleibt doch die gleiche ... und es is doch nach wie vor go('rechts') / go('links') usw. oder seh ich das falsch?
Geändert von Parayia (31-08-2011 um 11:33 Uhr)
|

31-08-2011, 11:45
|
boeserfrosch
Registrierter Benutzer
|
|
Registriert seit: Nov 2009
Beiträge: 93
|
|
gib mir mal bitte deine css-datei dann kann ich mir das mal genauer anschauen
|

31-08-2011, 11:47
|
Parayia
Registrierter Benutzer
|
|
Registriert seit: Aug 2011
Beiträge: 23
|
|
Ich poste meine Kompletten Dateien in ner zip datei wenn das okay ist :P
|

31-08-2011, 11:47
|
boeserfrosch
Registrierter Benutzer
|
|
Registriert seit: Nov 2009
Beiträge: 93
|
|
Ich denke das sollte kein Problem sein
|

31-08-2011, 11:51
|
Parayia
Registrierter Benutzer
|
|
Registriert seit: Aug 2011
Beiträge: 23
|
|
File-Upload.net - auto.zip
wollts hier hochladen ^^ is nur 100kb zu groß :P
unten rechts der kleine download button  und danke für deine bemühungen :>
BTW. die dateien movement. js und start. js ignorieren :P waren nur zum ausprobieren ^^ die datei mit deiner möglichkeit ist startS. JS
css datei erkennt man ja .. genau wie die html datei :>
Geändert von Parayia (31-08-2011 um 11:56 Uhr)
|

31-08-2011, 12:10
|
boeserfrosch
Registrierter Benutzer
|
|
Registriert seit: Nov 2009
Beiträge: 93
|
|
So funktioniert es jetzt bei mir:
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ferngesteuertes Auto</title>
<script type="text/javascript">
var x = 50; //variable für die x-achse
var y = 50; //variable für die y-achse
var t = 8; //variable für die Zeit
var b = "url(images/rechts.png)"; //variable für den Background des Bereichs
var move = null;
function go(anweisung) {
if(anweisung == "rechts" ||
anweisung == "links" ||
anweisung == "runter" ||
anweisung == "rauf" ||
anweisung == "right"){
if(move != null)
{
clear(move);
}
move = window.setInterval("moveto('"+anweisung+"')", 40);
}
if(anweisung=="turbo")
{
t = t + 10;
}
if(anweisung == "slow")
{
t = t - 5;
}
else if(anweisung == "stop")
{ window.clearInterval (move);}
}
function clear(interval)
{
window.clearInterval (interval);
}
function moveto(richtung)
{
switch(richtung)
{
case "links":
if (x > 20) {
x = x - t;
b = "url(images/links.png)";
document.getElementById("auto").style.left = (x + "px");
document.getElementById("auto").style.backgroundImage = b;
}
break;
case "rechts":
if (x < 1400)
{
x = x + t;
b = "url(images/vor.png)";
document.getElementById("auto").style.left = (x + "px");
document.getElementById("auto").style.backgroundImage = b; }
break;
case "rauf":
if (y > 50) {
y = y - t;
b = "url(images/rauf.png)";
document.getElementById("auto").style.top = (y + "px");
document.getElementById("auto").style.backgroundImage= b; }
break;
case "runter":
if (y < 450 ) {
y = y + t;
b = "url(images/runter.png)";
document.getElementById("auto").style.top = (y + "px");
document.getElementById("auto").style.backgroundImage= b; }
break;
}
}
function buttonrechts()
{
if(b=='url(images/rechts.png)'){go('rechts');}
if(b=='url(images/vor.png)'){go('runter');}
if(b=='url(images/runter.png)'){go('links');}
if(b=='url(images/links.png)'){go('rauf');}
if(b=='url(images/rauf.png)'){go('rechts');}
}
function buttonlinks()
{
if(b=='url(images/vor.png)'){go('links');}
if(b=='url(images/links.png)'){go('runter');}
if(b=='url(images/runter.png)'){go('right');}
if(b=='url(images/rechts.png)'){go('rauf');}
if(b=='url(images/rauf.png)'){go('links');}
}
</script>
<style type="text/css">
body
{
width:700px;height:700px;
background-image:url(images/camouflage.png);
}
#auto
{
top: 50px;
left: 20px;
position: absolute;
background-image:url('images/rechts.png');
width:200px;
height:200px;
background-repeat:no-repeat;
}
#steuer
{
margin-left:500px;
padding-left:50px;
padding-top:3px;
padding-right:50px;
background:white;
height:30px;
width:570px;
border:5px ridge green;
opacity:0.6;
filter:alpha(opacity=60);
}
#fahren
{
height:600px;
width:1600px;
border:5px ridge green;
opacity:0.2;
filter:alpha(opacity=60);
background:white;
}
</style>
<link rel="stylesheet" href="cardesign.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<div id="steuer">
<input type="button" name="Right" value="Right" onclick= "buttonrechts()">
<input type="button" name="Left" value="Left" onclick= "go('links')" >
<input type="button" name="Stop" value="Stop" onclick= "go('stop')">
<input type="button" name="Down" value="Down" onclick= "go('runter')">
<input type="button" name="Up" value="Up" onclick= "go('rauf')">
<input type="button" name="Turbo" value="Turbo" onclick= "go('turbo')">
<input type="button" name="Slow" value="Slow" onclick= "go('slow')">
</div>
<div id="fahren"><!-- Bereich in dem das Auto sich bewegt-->
</div>
<div id="auto"><!--Bereich des Autos-->
</div>
</body>
</html>
|

31-08-2011, 12:15
|
Parayia
Registrierter Benutzer
|
|
Registriert seit: Aug 2011
Beiträge: 23
|
|
ausprobiert  klappt
hoffe du bist noch was da ^^ für den fall eines falles das ich noch iwas an fragen hab
aber ansonsten super :>
|
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
|
|
Ähnliche Themen
|
Thema |
Autor |
Forum |
Antworten |
Letzter Beitrag |
setInterval schleife unterbinden
|
xJonx |
HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS |
6 |
22-03-2011 17:29 |
setinterval Funktion mit Parameter aufrufen?!
|
busstop |
HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS |
6 |
19-04-2005 12:26 |
anstelle global $a,$b,$c,$d; -> global CONST;
|
joschua |
PHP Developer Forum |
11 |
24-01-2003 22:26 |
setInterval funtzt nicht...
|
Metallica |
Grafik / Design / Flash ... |
2 |
14-01-2003 18:49 |
eine Art Funktion setinterval() in php???
|
czapie |
PHP Developer Forum |
4 |
11-09-2002 05:42 |
Themen-Optionen |
|
Thema bewerten |
|
Forumregeln
|
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.
HTML-Code ist aus.
|
|
|
|
PHP News
|