Question

我正在尝试创建一个div生成器，该生成器将随机div随机放置在体内的随机位置。到目前为止，我正在使用的jQuery脚本仅生成一个div类。我怎样才能叫多个班？我希望它能够从CSS的div列表中随机选择。

非常感谢。

<script>$(document).ready(function () {
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='exploding' + 'box'></div>").css({
        'left': posx + 'px',
            'top': posy + 'px'
    });
    $newdiv.appendTo('body').delay(200).fadeIn(100, function () {
        //$(this).remove();
        makeDiv();
    });
}

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

Answer 1

$(document).ready(function () {
  var classes = ['exploding', 'box', 'test', 'class4', 'class5'],
      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] + "'>New div</div>").css({
          'left': posx + 'px',
          'top': posy + 'px'
      });
      $newdiv.appendTo('body').delay(200).fadeIn(100, function () {
          //$(this).remove();
          makeDiv();
      });
      
      counter = counter < divsize -1 ? counter + 1 : 0;
  }
})

<html>
  <head>
    <title>TEST</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
  </body>
</html>

您应该在课程之间保持间距。此外，您可以根据需要添加更多的内容。

class ='爆炸盒另一个类'

$newdiv = $("<div class='exploding box'></div>").css({
    'left': posx + 'px',
        'top': posy + 'px'
});

如何在此jquery脚本中添加更多div类？

1 个答案: