setInterval global

Parayia antwortet

31.08.2011, 12:37
gesagt getan
war aber auch ne echt super hilfe ^^
Einen Kommentar schreiben:
admin antwortet

31.08.2011, 12:35
Zitat von Parayia Beitrag anzeigen

ausprobiert klappt
hoffe du bist noch was da ^^ für den fall eines falles das ich noch iwas an fragen hab

aber ansonsten super :>

Dann bewertet euere Helfer auch mal, so als kleines DANKE!
Thx
berni
Einen Kommentar schreiben:
Parayia antwortet

31.08.2011, 11:15
ausprobiert klappt
hoffe du bist noch was da ^^ für den fall eines falles das ich noch iwas an fragen hab

aber ansonsten super :>
Einen Kommentar schreiben:

boeserfrosch antwortet

31.08.2011, 11:10

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>

Einen Kommentar schreiben:

Parayia antwortet

31.08.2011, 10:51
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 :>

Zuletzt geändert von Parayia; 31.08.2011, 10:56.
Einen Kommentar schreiben:
boeserfrosch antwortet

31.08.2011, 10:47
Ich denke das sollte kein Problem sein
Einen Kommentar schreiben:
Parayia antwortet

31.08.2011, 10:47
Ich poste meine Kompletten Dateien in ner zip datei wenn das okay ist :P
Einen Kommentar schreiben:
boeserfrosch antwortet

31.08.2011, 10:45
gib mir mal bitte deine css-datei dann kann ich mir das mal genauer anschauen
Einen Kommentar schreiben:
Parayia antwortet

31.08.2011, 10:28
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?

Zuletzt geändert von Parayia; 31.08.2011, 10:33.
Einen Kommentar schreiben:
boeserfrosch antwortet

31.08.2011, 10:27
Hast du das noch mitbekommen?

Zitat von boeserfrosch Beitrag anzeigen

ach und setzte ggf einfache anführungszeichen im setInterval um "+anweisung+"
Einen Kommentar schreiben:
Parayia antwortet

31.08.2011, 10:25
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 ...
Einen Kommentar schreiben:
boeserfrosch antwortet

31.08.2011, 10:23
Wird dir auch ne Zeile angegeben wo der Fehler auftritt?
ach und setzte ggf einfache anführungszeichen im setInterval um "+anweisung+"

Zuletzt geändert von boeserfrosch; 31.08.2011, 10:25.
Einen Kommentar schreiben:

Parayia antwortet

31.08.2011, 10:20

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>

Einen Kommentar schreiben:

boeserfrosch antwortet

31.08.2011, 10:00

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;
 

}
}

Einen Kommentar schreiben:

Parayia antwortet

31.08.2011, 09:15

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');} 
}

Zuletzt geändert von Parayia; 31.08.2011, 09:30.

Wird geladen... Bitte warte.

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben: