Question

我试图让div上升，下降，再次上升，再下降等等，直到你点击它为止。这就是我所拥有的：

<!DOCTYPE html>
<html>
<head>
<title>Fun with animations dude</title>
<link rel="stylesheet" href="animation.css"/>
</head>
<body>
    <div id="moving">
    </div>

    <script type="text/javascript">
        var moving = document.getElementById("moving");
        var mMargin = moving.style.marginTop | 0;
        var moving = false;

        moving.onclick = start;

        function start() {
            if (moving == false) {
                moving = true;
                move();
                window.alert("Start!");
            }

            else {
                 moving = false;
                 window.alert("Aww...");
            }
        }


        function move() {
            if (moving) {
                if (mMargin < 700) {
                    mMargin += 10;
                    moving.style.marginTop = mMargin + "px";
                    setTimeout(move, 20);
                }

                else {
                    mMargin -= 10;
                    moving.style.marginTop = mMargin + "px";
                    setTimeout(move, 20);
                }
            }    
        }
    </script>
</body>
</html>

我实在为自己感到骄傲一段时间，直到它没有工作......正如你所看到的，我通过添加那些警告框来尝试进行故障排除。它们都没有被触发，所以现在它是初始的问题，尽管也可能有其他错误。控制台中没有错误。建议？

Answer 1

Hippydog的回答让我超越了第一部分。然后我意识到我必须添加另一个变量来防止div在第一次运行的底部突然出现。我只是想发布一些对其他人有用的内容供参考：

<!DOCTYPE html>
<html>
<head>
<title>Fun with animations dude</title>
<link rel="stylesheet" href="animation.css"/>
</head>
<body>
    <div id="moving">
    </div>

    <script type="text/javascript">
        var moving = document.getElementById("moving");
        var mMargin = moving.style.marginTop | 0;
        var isMoving = false;
        var movingDown = true;

        moving.onclick = start;

        function start() {
            if (isMoving == false) {
                isMoving = true;
                move();
            }

            else {
                isMoving = false;
            }
        }


        function move() {
            if (isMoving) {
                if (movingDown) {
                    mMargin += 10;
                    moving.style.marginTop = mMargin + "px";
                    if (mMargin >= 1000) {
                        movingDown = false;
                    }
                    setTimeout(move, 20);
                }

                else {
                    mMargin -= 10;
                    moving.style.marginTop = mMargin + "px";
                    if (mMargin <= 0) {
                        movingDown = true;
                    }
                    setTimeout(move, 20);
                }
            }
        }
    </script>
</body>
</html>

如果有经验的编码员发现这个剧本存在一些不可预知的问题，请随时告诉我。

Answer 2

第一个和第三个局部变量都称为moving。将第二个重命名为isMoving（并更新此变量的任何提及）会导致警报按预期显示。

重复Javascript动画？

2 个答案: