使用div jQuery创建div

时间:2018-10-04 20:06:26

标签: javascript jquery

我正在div中生成div。我的脚本目前仅在体内使用。如何使div在div中生成。非常感谢

$(document).ready(function () {
  var classes = ['box1', 'box2', 'box3', 'box4', 'box5'],
  counter = 0;

  makeDiv();


  function makeDiv() {
    var numRand = Math.floor(Math.random() * 501);
    var divsize = 5;
    var posx = (Math.random() * ($('body').width() - divsize)).toFixed();
    var posy = (Math.random() * ($('body').height() - divsize)).toFixed();
    $newdiv = $("<div class='" + classes[counter] + "'></div>").css({
      'left': posx + 'px',
      'top': posy + 'px'
    });
    $newdiv.appendTo('body').delay(20).fadeIn(100, function () {
      //$(this).remove();
      makeDiv();
    });

    counter = counter < divsize -1 ? counter + 1 : 63;
  }
})

1 个答案:

答案 0 :(得分:0)

好吧,那么,如果您想通过一个称为 parent_div 的常见div来创建<div>,请尝试下一个示例:

var counter = 0;
var classes = ['box1', 'box2', 'box3', 'box4', 'box5'];

$(document).ready(function ()
{
    // Create the parent div of all divs that will be generated.
    // Add this div to the body.

    $('<div id"parent_div"></div>').appendTo('body');

    // Start recursive creation of more divs.

    makeDiv();
});

function makeDiv()
{
    var numRand = Math.floor(Math.random() * 501);
    var divsize = 5;
    var posx = (Math.random() * ($('body').width() - divsize)).toFixed();
    var posy = (Math.random() * ($('body').height() - divsize)).toFixed();

    var newdiv = $('<div class="' + classes[counter] + '"></div>').css({
        'left': posx + 'px',
        'top': posy + 'px',
        'display': 'none' // Since you want they to fadeIn.
    });

    // FIX: can't set counter to 63 because will cause indexing error on array classes.
    //counter = counter < divsize -1 ? counter + 1 : 63;
    counter = counter < (divsize - 1) ? counter + 1 : 0;

    newdiv.appendTo($("#parent_div")).delay(20).fadeIn(100, function ()
    {
        makeDiv();
    });
}