javascript - jQuery-在间隔上制作新的div

因此，我要在这里做的是创建一个页面，每2秒产生一个新的随机颜色和大小框，当我单击它们时将其删除。问题是，创建第一个框没有问题，但是此后，我得到一个错误，即我的函数“ makeDiv”未每2秒定义一次。

我想念什么吗？

setInterval('makeDiv', 2000);

(function makeDiv() {
    var divsize = ((Math.random() * 100) + 50).toFixed();
    var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
    $newdiv = $('<div/>').css({
        'width': divsize + 'px',
        'height': divsize + 'px',
        'background-color': color
    });

    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

    $newdiv.css({
        'position': 'absolute',
        'left': posx + 'px',
        'top': posy + 'px',
        'display': 'none'
    }).appendTo('body').fadeIn(100)

    $("div").click(function() {
        $(this).remove();
    });

})();

最佳答案

问题是..您在setinterval中使用了makeDiv作为函数，但您在(function(){});中使用了它，并且它看起来像在$(document).ready()中，因此它是第一次使用..在准备好在setinterval中使用文档后，它才可以工作..所以我在这里所做的只是用function makeDiv(){}而不是(function makeDiv(){}());做一个明确的功能..

$(document).on('click' , 'div',function() {
    $(this).remove();
});

我更喜欢一次使用该代码，而不用每个setInterval重复执行此代码，因此我在函数外部使用了此代码，而不是像在内部那样使用

$("div").click(function() {
    $(this).remove();
});

演示版

$(document).on('click' , 'div',function() {
    $(this).remove();
});

setInterval('makeDiv()', 2000);

function makeDiv() {
    var divsize = ((Math.random() * 100) + 50).toFixed();
    var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
    $newdiv = $('<div/>').css({
        'width': divsize + 'px',
        'height': divsize + 'px',
        'background-color': color
    });

    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

    $newdiv.css({
        'position': 'absolute',
        'left': posx + 'px',
        'top': posy + 'px',
        'display': 'none'
    }).appendTo('body').fadeIn(100);

};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

用动画更新演示

$(document).on('click' , 'div',function() {
    $(this).remove();
});

setInterval('makeDiv()', 2000);

function makeDiv() {
    var divsize = ((Math.random() * 100) + 50).toFixed();
    var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
    $newdiv = $('<div/>').css({
        'width': divsize + 'px',
        'height': divsize + 'px',
        'background-color': color
    });

    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

    $newdiv.css({
        'position': 'absolute',
        'left': posx + 'px',
        'top': posy + 'px',
        'display': 'none'
    }).appendTo('body').fadeIn(100).animate({'left' : '0px', 'right': $(window).width() - divsize} , 3000).animate({'right' : '0px', 'left': $(window).width() - divsize} , 3000);

};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

关于javascript - jQuery-在间隔上制作新的div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37177656/