jQuery

Question

所以我在这里要做的是制作一个页面，每 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();
    });

})();

Answer 1

问题是..你在 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>

Answer 2

不确定为什么需要 IIFE 所以我把它作为一个普通函数并调用

像这样设置间隔

setInterval(makeDiv, 2000);

勾选这个jsFiddle

Answer 3

这可能不是理想的答案，但是，这是您可以尝试的替代方法：

setInterval(function() {
    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)

}, 2000);

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

jQuery - 在间隔上制作新的 div

jQuery - Making new div on interval

javascript

object

this

setinterval