如何使js移动脚本具有可重复性

How do you make a js movement script repeatable?

本文关键字:可重复性 脚本 移动 何使 js      更新时间:2023-09-26

我制作了以下脚本:

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,其像素量为变量"aantalpixels"此时所保持的像素量。(变量的名称为荷兰语)。

它第一次工作,但第二次div将永远继续。我认为这与if语句有关。

您的脚本没有正确计算目标。如果将div(比如100px)向右移动,那么在第一次运行时,positiehuidigleft+aantalpixels将是0100,它仍然被视为100。然而,在第二次运行时,positiehuidigleft+aantalpixels将是0100100,这有点太高,因此创建了看似无穷无尽的动画。

有关工作示例,请参见DEMO(注意:移动按钮绝对设置为离顶部300px,因此请确保预览框足够大,可以看到它们)。

if构造已更改为

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