Verwendung von setInterval und clearInterval zum Verschieben von Text diagonal links (zurück zum Anfang) nach rechts und nach unten

Dies ist das Ergebnis dessen, was ich versuche, nur mit JavaScript (keine jQuery oder CSS) mit setInterval und clearInterval:Verwendung von setInterval und clearInterval zum Verschieben von Text diagonal links (zurück zum Anfang) nach rechts und nach unten

ich muss beginnen, den Text von der oberen linken Ecke bewegt zu der oberen rechten Ecke des Browsers des Fensters. Wenn die obere rechte Ecke erreicht ist, wird der Text in die untere rechte Ecke verschoben. Danach wird es zu seiner Startposition zurückkehren und stoppen. Ich kann den Text nach rechts und unten bewegen, aber nicht zurück zur Startposition. Ich habe verschiedene Möglichkeiten ausprobiert, um meinen Kopf um diesen einen Teil zu wickeln und waren erfolglos. Jede Hilfe würde sehr geschätzt werden. Dies ist mein Code:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script type="text/javascript"> 
 
var thisLeft=0; 
 
var thisTop=0; 
 
var moveID=0; 
 

 
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 
 
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 
 

 
// Function to move the text 
 
function moveText(){ 
 
\t 
 
\t var thisText= document.getElementById('myDiv'); 
 
\t if (thisLeft < width){ 
 
\t \t thisLeft += 100; //how much the text moves right 
 
\t }else if (thisLeft >= width) { 
 
\t \t document.getElementById("myDiv").style.color = "blue"; 
 
\t \t document.getElementById("myDiv").style.fontSize= "xx-Large"; 
 
\t \t document.getElementById('myDiv').innerHTML= "moveDown"; 
 
\t \t thisTop +=100; //how much the text moves down 
 
\t } 
 
\t 
 
\t if (thisTop >= height && thisLeft >= width){ 
 
\t \t thisTop -= 100; 
 
\t \t thisLeft -= 100; 
 
\t } 
 

 

 
\t thisText.style.left=thisLeft +"px"; 
 
\t thisText.style.top=thisTop +"px"; 
 
\t } 
 

 
// how long it will take the text move to complete 
 
function doMove(){ 
 
moveID=setInterval(moveText, 500); 
 
} 
 

 
</script> 
 
</head> 
 
<body onload= "doMove()" > 
 
<div id="myDiv"style="position:absolute;" > 
 
<p>movingRight</p> 
 
</div> 
 

 
</body> 
 
</html>

Quelle

2016-10-27 Lprox5

zu korrigieren für die Skalierung Sie können http://jsbin.com/hahufocoxa/1/edit?html,output tun. Ich habe auch den Timer gestoppt –

Oh, ich verstehe. Ich habe das Verhältnis an der falschen Stelle multipliziert, insbesondere eine der globalen Variablen, die ich für die Fensterbreite und -höhe deklariert habe. Auch hier bin ich sehr dankbar für all Ihre Hilfe und danke Ihnen, dass Sie mir neue Konzepte vorgestellt haben. – Lprox5

ich einen zustandsbasierten Ansatz verwenden würde und in einem anderen Zustand nach jeder Richtungsänderung bewegen.

Eine Sache, die Sie auch tun müssen, die ich in meinem Code unten nicht eingeschlossen habe, ist entweder thisLeft oder thisTop durch das Verhältnis von Breite zu Höhe zu skalieren, um wegen der Seite nicht zum Start zurück zu bekommen quadratisch sein.

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 
var thisLeft=0; 
var thisTop=0; 
var moveID=0; 

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 

var state = 1; 

// Function to move the text 
function moveText(){ 

    var thisText= document.getElementById('myDiv'); 

    if (state == 1){ 
     thisLeft += 100; //how much the text moves right 

    } else if (state == 2) { 
     thisTop +=100; //how much the text moves down 

    } else if (state == 3) { 
     thisTop -= 100; 
     thisLeft -= 100; 
    } 

    if (state == 1 && thisLeft >= width){ 
     state = 2; 
     document.getElementById("myDiv").style.color = "blue"; 
     document.getElementById("myDiv").style.fontSize= "xx-Large"; 
     document.getElementById('myDiv').innerHTML= "moveDown"; 
    } else if (state == 2 && (thisTop >= height)) { 
     state = 3; 
    } else if (state == 3 && (thisLeft <= 0)) { 
     state = 0; 
    } 

    thisText.style.left=thisLeft +"px"; 
    thisText.style.top=thisTop +"px"; 
} 

// how long it will take the text move to complete 
function doMove(){ 
moveID=setInterval(moveText, 500); 
} 

</script> 
</head> 
<body onload= "doMove()" > 
<div id="myDiv"style="position:absolute;" > 
<p>movingRight</p> 
</div> 
</body> 
</html>

Beispiel: http://jsbin.com/latotujuga/edit?html,output

Quelle

2016-10-27 22:59:05

Gibt es eine Dokumentation zum Status? Ich habe es noch nie zuvor gesehen und möchte den Code ein wenig mehr verstehen, vorausgesetzt, ich habe gerade angefangen, JavaScript zu lernen. – Lprox5

Ich habe eine grundlegende Finite State Machine (FSM) erstellt. Es ist nicht etwas, das spezifisch für die Sprache ist, sondern nur eine Möglichkeit, sich einem Problem zu nähern - https://en.wikipedia.org/wiki/Finite-state_machine –

In Ihrem Fall ist jeder "Zustand" eine bestimmte Richtung, in die Sie für einige reisen möchten Zeitraum. Das System bleibt in diesem Zustand, bis es eine Bedingung erfüllt (z. B.> Breite) und dann zum nächsten Zustand übergeht. Es bleibt dann in diesem Zustand, während es gegen eine neue Bedingung (> Höhe) prüft und dann zur nächsten wechselt. Das wiederholt sich nur bis zum Ende. Wenn du eine Schleife machen willst, setze es zurück auf 'state = 1' statt auf 'state = 0' –

Verwendung von setInterval und clearInterval zum Verschieben von Text diagonal links (zurück zum Anfang) nach rechts und nach unten

Antwort

Verwandte Themen