Javascript 如何使用setInterval和clearInterval在向右和向下移动后沿对角线向左移动文本（返回到起始位置）_Javascript_Html_Css

Javascript 如何使用setInterval和clearInterval在向右和向下移动后沿对角线向左移动文本（返回到起始位置）

javascript html css

Javascript 如何使用setInterval和clearInterval在向右和向下移动后沿对角线向左移动文本（返回到起始位置）,javascript,html,css,Javascript,Html,Css,这是我仅使用JavaScript（无jQuery或CSS）和setInterval和clearInterval实现的结果：我必须开始将文本从窗口浏览器的左上角移动到右上角。当它到达右上角时，文本将开始向下移动到右下角。之后，它将返回到其开始位置并停止。我可以将文本移到右侧和底部，但不能移回起始位置。我尝试过各种方法来解决这个问题，但都没有成功。任何帮助都将不胜感激。这是我的代码： var thisLeft=0； var-thisTop=0； var-moveID=0； var width

这是我仅使用JavaScript（无jQuery或CSS）和setInterval和clearInterval实现的结果：

我必须开始将文本从窗口浏览器的左上角移动到右上角。当它到达右上角时，文本将开始向下移动到右下角。之后，它将返回到其开始位置并停止。我可以将文本移到右侧和底部，但不能移回起始位置。我尝试过各种方法来解决这个问题，但都没有成功。任何帮助都将不胜感激。这是我的代码：


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；
//函数来移动文本
函数moveText（）{
var thisttext=document.getElementById（'myDiv'）；
如果（左<宽度）{
thisLeft+=100；//文本向右移动的程度
}else if（thisLeft>=宽度）{
document.getElementById（“myDiv”）.style.color=“蓝色”；
document.getElementById（“myDiv”）.style.fontSize=“xx大”；
document.getElementById（'myDiv'）.innerHTML=“moveDown”；
thisTop+=100；//文本向下移动的幅度
}
如果（thisTop>=高度&thisLeft>=宽度）{
这个TOP-=100；
左-=100；
}
thisText.style.left=thisLeft+“px”；
thistText.style.top=thisttop+px；
}
//文本移动需要多长时间才能完成
函数doMove（）{
moveID=设置间隔（moveText，500）；
}
移动权

我会使用一种基于状态的方法，每次方向改变后都会转移到另一个状态

您还需要做的一件事，我在下面的代码中没有包括，就是根据宽度与高度的比率缩放

Thisleet

或

thisTop

，以返回到起始位置，因为页面不是方形的

<!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>


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状态=1；
//函数来移动文本
函数moveText（）{
var thisttext=document.getElementById（'myDiv'）；
如果（状态==1）{
thisLeft+=100；//文本向右移动的程度
}else if（state==2）{
thisTop+=100；//文本向下移动的幅度
}否则如果（状态==3）{
这个TOP-=100；
左-=100；
}
如果（状态==1&&thisLeft>=宽度）{
状态=2；
document.getElementById（“myDiv”）.style.color=“蓝色”；
document.getElementById（“myDiv”）.style.fontSize=“xx大”；
document.getElementById（'myDiv'）.innerHTML=“moveDown”；
}否则如果（状态==2&&（此顶部>=高度））{
状态=3；
}else if（state==3&&）（Thisleet）有关于state的文档吗？我以前从未遇到过它，我想进一步了解代码，当然我刚刚开始学习JavaScript。我创建了一个基本的有限状态机（FSM）。这不是特定于语言的东西，只是解决问题的一种方式-在您的情况下，每个“状态”都是您希望在一段时间内进入的特定方向。系统将保持该状态，直到满足某个条件（例如>宽度）然后它移动到下一个状态。然后它在检查新条件（>高度）时保持该状态然后移动到下一个。这只是重复，直到完成。如果你想循环将其设置回state=1
而不是state=0
啊，好吧，我认为这对我来说是有意义的。我甚至不知道这样的事情是可能的！过去几天这个项目让我发疯了。非常感谢你的帮助！这是可行的吗ch是否适用于其他脚本语言？是的，它适用于其他语言以纠正您可以进行的缩放。我也停止了timerOh，我明白了。我在错误的位置乘以了比率，特别是我声明的窗口宽度和高度的一个全局变量。再次，我非常感谢您在这方面和这方面的所有帮助谢谢你向我介绍新概念。