Question

我正在尝试使用jQuery进行div移动 -

HTML：

<body>
    <div class="random"></div>
    <button class="play">Click Me!"</button>
</body>

CSS：

body {
    background-color: red;
    margin: 0;
    padding: 0;
}

.random {
    background-color: black;
    height: 5px;
    width: 5px;
}

JS：

$(document).ready(function() {

    var playing = false;
    var top;
    var left;
    var i;

// the button controls the play start/stop, based on "playing"    
    $('.play').click(function() {
        if(!playing) {
// if not playing, start playing around 10 times...
            playing = true;
            for(i=0; i<10; i++) {
                setTimeout(function() {
                    top = Math.floor((Math.random() * 100) + 1);
                    left = Math.floor((Math.random() * 100) + 1);
                    $('.random').offset({top: top, left: left});
                }, 1000);
            }
        } else {
// if playing, stop the play and return to 0,0...
            playing = false;
            top = left = 0;
            $('.random').offset({top: top, left: left});
        }
    });
});

我确实参考了stackoverflow上的几个例子，它讨论了我在上面的代码中使用的setTimeout（）。

问题： 我期待这个小div在屏幕上的随机位置玩100次，然而，结果完全不同。我刚刚在屏幕上显示了div的最终位置。

随机移动div，并在屏幕上连续移动

0 个答案: