Javascript #2：从Java脚本为儿童创建自己的动画；I don’我没有按预期工作_Javascript

Javascript #2：从Java脚本为儿童创建自己的动画；I don’我没有按预期工作

javascript

Javascript #2：从Java脚本为儿童创建自己的动画；I don’我没有按预期工作,javascript,Javascript,我只是开始进行JavaScript开发。我正试图完成《儿童读物》中的一项任务，我陷入了以下困境：交互式编程你好，世界！ var-leftOffset=0； var-topOffset=0； var max=200； var moveHeading=函数（）{ 无功电流方向；如果（！currentDirection | | currentDirection==topOffset）{ 对于（变量i=0；i

我只是开始进行JavaScript开发。我正试图完成《儿童读物》中的一项任务，我陷入了以下困境：


交互式编程
你好，世界！
var-leftOffset=0；
var-topOffset=0；
var max=200；
var moveHeading=函数（）{
无功电流方向；
如果（！currentDirection | | currentDirection==topOffset）{
对于（变量i=0；i


问题是，在调试过程中，我确实看到了它是如何以正方形的形式从一边移动到另一边的，但当我在浏览器选项卡中打开页面时（没有打开DevTools），它的移动方式与任务中请求的不同。我在这里遗漏了什么？
我们可以让这条路变得更好。但就目前而言：）

你好，世界！
var-leftOffset=0；
var-topOffset=0；
var max=200；
var计数器=0；
var currentDirection=“右”；
var moveHeading=函数（）{
如果（当前方向==“右”）{
$（“#标题”）。抵销({
左：左偏移
});
leftOffset++；
如果（计数器==最大值）{
currentDirection=“底部”；
计数器=0；
}
}
如果（当前方向==“底部”）{
$（“#标题”）。抵销({
顶部：拓扑偏移
});
topOffset++；
如果（计数器==最大值）{
currentDirection=“左”；
计数器=0；
}
}
如果（当前方向==“左”）{
$（“#标题”）。抵销({
左：左偏移
});
左偏移--；
如果（计数器==最大值）{
currentDirection=“top”；
计数器=0；
}
}
如果（当前方向==“顶部”）{
$（“#标题”）。抵销({
顶部：拓扑偏移
});
拓扑偏移--；
如果（计数器==最大值）{
currentDirection=“右”；
计数器=0；
}
}
计数器++；
};
设置间隔（移动标题，5）；

但是你可以写得更紧凑，更干净，像这样：
<!DOCTYPE html>
<html>

<body>
    <h1 id="heading">Hello, world!</h1>
    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
    <script>
        let max = 200,
            counter = 0,
            x = [1, 0, -1, 0],
            y = [0, 1, 0, -1],
            idx = 0,
            el = $("#heading"),
            l = 0,
            t = 0,
            move = () => {
                l += x[idx];
                t += y[idx];
                el.offset({
                    left: l,
                    top: t
                });
            },
            moveHeading = () => {
                if (counter++ < max) {
                    move();
                    return;
                }
                idx++;
                if (idx > 3) idx = 0;
                counter = 0;
                moveHeading();
            };
        setInterval(moveHeading, 5);
    </script>
</body>

</html>


你好，世界！
设max=200，
计数器=0，
x=[1,0，-1,0]，
y=[0,1,0，-1]，
idx=0，
el=$（“#标题”），
l=0，
t=0，
移动=（）=>{
l+=x[idx]；
t+=y[idx]；
标高偏移({
左:l,，
顶部：t
});
},
moveHeading=（）=>{
如果（计数器+++<最大值）{
move（）；
返回；
}
idx++；
如果（idx>3）idx=0；
计数器=0；
moveHeading（）；
};
设置间隔（移动标题，5）；
Hi here，它与DevTools一起工作的事实让我觉得与缓存有关。您是否尝试过在浏览器上进行硬刷新（CTRL+F5）以防万一？您好
<!DOCTYPE html>
<html>

<body>
    <h1 id="heading">Hello, world!</h1>
    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
    <script>
        var leftOffset = 0;
        var topOffset = 0;
        var max = 200;
        var counter = 0;
        var currentDirection = "right";
        var moveHeading = function() {
            if (currentDirection === "right") {
                $("#heading").offset({
                    left: leftOffset
                });
                leftOffset++;
                if (counter === max) {
                    currentDirection = "bottom";
                    counter = 0;
                }
            }
            if (currentDirection === "bottom") {
                $("#heading").offset({
                    top: topOffset
                });
                topOffset++;
                if (counter === max) {
                    currentDirection = "left";
                    counter = 0;
                }
            }
            if (currentDirection === "left") {
                $("#heading").offset({
                    left: leftOffset
                });
                leftOffset--;
                if (counter === max) {
                    currentDirection = "top";
                    counter = 0;
                }
            }
            if (currentDirection === "top") {
                $("#heading").offset({
                    top: topOffset
                });
                topOffset--;
                if (counter === max) {
                    currentDirection = "right";
                    counter = 0;
                }
            }
            counter++;
        };
        setInterval(moveHeading, 5);

    </script>
</body>

</html>

<!DOCTYPE html>
<html>

<body>
    <h1 id="heading">Hello, world!</h1>
    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
    <script>
        let max = 200,
            counter = 0,
            x = [1, 0, -1, 0],
            y = [0, 1, 0, -1],
            idx = 0,
            el = $("#heading"),
            l = 0,
            t = 0,
            move = () => {
                l += x[idx];
                t += y[idx];
                el.offset({
                    left: l,
                    top: t
                });
            },
            moveHeading = () => {
                if (counter++ < max) {
                    move();
                    return;
                }
                idx++;
                if (idx > 3) idx = 0;
                counter = 0;
                moveHeading();
            };
        setInterval(moveHeading, 5);
    </script>
</body>

</html>