Question

对于个人项目，我试图用随机生成的div来填充窗口。我开始使用我在某个帖子中找到的代码并根据自己的喜好调整它（例如div的颜色和宽度）。

但是，此代码旨在生成div，然后使其淡出，并再次循环。我想要的是在页面加载时加载一定数量的div而不会消失。

我确实认识到代码末尾的“.fadeOut”和“.remove（）”，但对于我的生活，我无法弄清楚如何在不破坏代码的情况下防止div消失，让单独出现一组随机放置的div。

(function makeDiv() {
  var divsize = ((Math.random() * 100) + 30).toFixed();
  var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
  $newdiv = $('<div/>').css({
    'width': 2 + 'px',
    'height': divsize + 'px',
    'border': '1px solid' + color,
    'transform': 'rotate(' + divsize + 'deg)',
    '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',
    'border-radius': '100px',
  }).appendTo('body').fadeIn(100).delay(300).fadeOut(200, function() {
    $(this).remove();
    makeDiv();
  });
})();

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

Answer 1

这样的事情？

我所做的就是删除.Take(1)和fadeIn部分，然后添加一个简单的函数来创建固定数量的div。我还从正在创建的div中删除了fadeOut。

＆＃13;

display: 'none'

＆＃13;

var makeDiv = () => {
  var divsize = ((Math.random() * 100) + 30).toFixed();
  var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
  $newdiv = $('<div/>').css({
    'width': 2 + 'px',
    'height': divsize + 'px',
    'border': '1px solid' + color,
    'transform': 'rotate(' + divsize + 'deg)',
    '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',
    'border-radius': '100px',
  }).appendTo('body');
}

var generateDivs = (x) => {
  for (let i = 0; i < x; i++) {
    makeDiv();
  }
}

generateDivs(100);

＆＃13;

在页面加载时随机放置div

1 个答案: