Question

我制作了以下剧本：

var object = document.getElementById("object");
        var omhoog = document.getElementById("omhoog");
        var omlaag = document.getElementById("omlaag");
        var links = document.getElementById("links");
        var rechts = document.getElementById("rechts");
        var currentInterval;

        object.style.left = '0px';
        object.style.top = '0px';

        omhoog.onclick = function()
        {
            var aantalpixels = prompt("Geef het aantal pixels in dat je het object wilt laten verplaatsen.");
            clearInterval(currentInterval);
            var positiehuidigtop = parseInt(object.style.top);
            currentInterval = setInterval(function()
            {
                if (parseInt(object.style.top)>positiehuidigtop-aantalpixels)
                {
                    object.style.top = (parseInt(object.style.top) - 1) + 'px';
                }
            }, 10);
        }

        omlaag.onclick = function()
        {
            var aantalpixels = prompt("Geef het aantal pixels in dat je het object wilt laten verplaatsen.");
            clearInterval(currentInterval);
            var positiehuidigtop = parseInt(object.style.top);
            currentInterval = setInterval(function()
            {
                if (parseInt(object.style.top)<positiehuidigtop+aantalpixels)
                {
                    object.style.top = (parseInt(object.style.top) + 1) + 'px';
                }
            }, 10);
        }

        links.onclick = function()
        {
            var aantalpixels = prompt("Geef het aantal pixels in dat je het object wilt laten verplaatsen.");
            clearInterval(currentInterval);
            var positiehuidigleft = parseInt(object.style.left);
            currentInterval = setInterval(function()
            {
                if (parseInt(object.style.left)>positiehuidigleft-aantalpixels)
                {
                    object.style.left = (parseInt(object.style.left) - 1) + 'px';
                }
            }, 10);
        }

        rechts.onclick = function()
        {
            var aantalpixels = prompt("Geef het aantal pixels in dat je het object wilt laten verplaatsen.");
            clearInterval(currentInterval);
            var positiehuidigleft = parseInt(object.style.left);
            currentInterval = setInterval(function()
            {
                if (parseInt(object.style.left)<positiehuidigleft+aantalpixels)
                {
                    object.style.left = (parseInt(object.style.left) + 1) + 'px';
                }
            }, 10);
        }

当我点击一个div时，它会移动另一个div，其中包含变量＆amp; aantalpixels＆＃39;在那一刻举行。（变量有荷兰名字）。

它第一次工作，但第二次div继续。我认为它与if语句有关。

Answer 1

您的脚本无法正确计算目标。如果您将div向100px移动到右侧，则在第一次运行时positiehuidigleft+aantalpixels将0100仍然被视为100.在第二次运行时，positiehuidigleft+aantalpixels将为0100100这有点太高了，从而创造了看似无穷无尽的动画。

有关工作示例，请参阅 DEMO （注意：移动按钮的设置绝对距离顶部300px，因此请确保预览框架足够大以便查看它们。）

if构造已更改为

if (parseInt(object.style.top)>parseInt(positiehuidigtop)-parseInt(aantalpixels))

你如何使js运动脚本可重复？

1 个答案: