Question

我正在尝试每隔几秒钟自动生成一次div。现在我有了它，所以我必须单击以创建div。如何做到这一点，以便在加载页面时自动生成水平的div，直到它们填满页面？谢谢。

$('#add').on('click', function() {
  if ($('#child').height() == $('#main').height() && $('#child').width() == $('#main').width()) {
    console.log("done");

  } else {
    $('#child').append('<div id="sub">aaaa</div>')
  }
})

#main {
  width: 500px;
  height: 500px;
  background: red;
}

#sub {

width:50px;
height:50px;
background:blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<div id="main">
  <div id="child"></div>
</div>

Answer 1

您可以尝试使用setInterval功能

var interval = setInterval(function(){
if ($('#child').height() == $('#main').height() && $('.row').last().width() == $('#main').width()) {
    console.log("done");
    clearInterval(interval);
  } else {
    var _$row;
    if ($('.row').last().width() == $('#main').width() || $('.row').length == 0){
        _$row = $('<div class="row"></div>');
        $('#child').append(_$row);
    } else {
        _$row = $('.row').last();
    }
    _$row.append('<div id="sub">aaaa</div>');
  }
}, 50);

#main {
  width: 500px;
  height: 500px;
  background: red;
}

#sub {
  width:50px;
  height:50px;
  background:blue;
  float:left;
}

.row:after {
    clear: both;
    content: '';
    display: table;
}

.row {
    width: fit-content;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<div id="main">
   <div id="child"></div>
</div>

Answer 2

您可以使用setInterval自动添加框。并对display:inline-block; CSS样式使用#sub使其水平。

请参见下面的代码段

var interval;

interval = setInterval(function(){
  if ($('#child').width() == $('#main').width()) {
    console.log("done");
    clearInterval(interval);
  } else {
    $('#child').append('<div id="sub">aaaa</div>')
  }
},1000);

#main {
  width: 500px;
  height: 500px;
  background: red;
}

#sub {

width:50px;
height:50px;
background:blue;
display:inline-block;
border:1px solid white;
box-sizing: border-box;
}

#child{ 
  display:inline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<div id="main">
  <div id="child"></div>
</div>

更新1：

您可以通过计算容器中可以容纳的盒子数量来动态检查条件。

请参见下面的代码段

var interval;
var counter = 0;
var maxCount = 1000;

interval = setInterval(function(){
    if(counter == 1){
      maxCount = Math.floor($('#main').width()/$('#sub').outerWidth()) * Math.floor($('#main').height()/$('#sub').outerHeight());
    }
    
  if(counter != 0 && counter >= maxCount){
    console.log("done");
    clearInterval(interval);
  } else {
    $('#child').append('<div id="sub">aaaa</div>');
  }
  
  counter++;
},1000);

#main {
  width: 500px;
  height: 100px;
  background: red;
}

#sub {

width:50px;
height:50px;
background:blue;
display:inline-block;
border:1px solid white;
box-sizing: border-box;
}

#child{ 
  display:inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<div id="main">
  <div id="child"></div>
</div>

希望这对您有帮助！：）

Answer 3

使用jQuery，当文档准备就绪时，每隔X毫秒使用setTimeout进行一次操作。

$('document').ready(function () {
const seconds = 2;
function fill() {
	if ($('#child').height() == $('#main').height() && $('#child').width() == $('#main').width())
		return;

	$('#child').append('<div id="sub">aaaa</div>');
	setTimeout(fill, seconds  * 1000);
}
setTimeout(fill, seconds * 1000);
});

#main {
  width: 500px;
  height: 500px;
  background: red;
}

#sub {

width:50px;
height:50px;
background:blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<div id="main">
  <div id="child"></div>
</div>

Answer 4

有几种处理方法，但是从代码中获取所需内容的最快方法是使用setTimeout

// no-conflict safe document ready function
jQuery(function($) {
  // call the function to kick things off
  addRowInOneSecond();

  // adding the row is placed inside this function for clarity / maintainability
  function addRowInOneSecond() {
    setTimeout(addRow, 1000);
  }

  function addRow() {
    if ($('#child').height() == $('#main').height() && $('#child').width() == $('#main').width()) {
      console.log("done");
      // stop, don't do anything else
      return;
    }

    // add the row
    $('#child').append('<div id="sub">aaaa</div>')
    // call the function again to add another row
    addRowInOneSecond();
  }
});

#main {
  width: 500px;
  height: 500px;
  background: red;
}

#sub {
  width: 50px;
  height: 50px;
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<div id="main">
  <div id="child"></div>
</div>

Answer 5

您可能想使用setInterval。此方法将在每个时间间隔（直到它被清除）执行作为第一个参数传递的函数。

let i = 0;
const main = document.querySelector('#main');

setInterval(() => {
  var el = document.createElement('div');
  var text = document.createTextNode(i++);
  el.setAttribute('id', `sub-${i}`);
  el.setAttribute('class', 'sub');
  el.appendChild(text);
  main.appendChild(el);
}, 2000);

#main {
  width: 500px;
  height: 500px;
  background: red;
}

.sub {
  width: 50px;
  height: 50px;
  background: blue;
  color: white;
}

<div id="main">
  <div id="child"></div>
</div>

自动连续制作div

5 个答案: