Question

我试图将每个div的创建延迟1秒无效，无法理解如何使用setTimeout或setInterval，任何帮助都会有所帮助。（另外，想将div相对于彼此居中）。我试图在彼此中绘制一系列尺寸逐渐缩小的系列。任何建议赞赏

var i;
var w = 400;
var delay = 3000;
$(function () {
    $("#boom").click(function () {
        for (w, i = 0; w >= 20; i++, w = w - 20) {
            $('body').append('<div id="div' + i + '" />'); {
                if (i % 2 === 0) {
                    $("#div" + i + "").css({
                        "background-color": "gold",
                        "position": "absolute",
                        "z-index": i,
                        "top": "20vw",
                        "left": "20vw",
                    }).width(w).height(w);
                } else {
                    $("#div" + i + "").css({
                        "background-color": "chartreuse",
                        "position": "absolute",
                        "z-index": i,
                        "top": "20vw",
                        "left": "20vw",
                    }).width(w).height(w);
                }
            }
        }

    });
});

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kwadrat w kwadracie</title>
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <button id="boom">Vamos!</button>
    <div id="outer"></div>

</body>
</html>

Answer 1

我不确定我是否完全明白你想要的结果是什么，但我认为这是你想要实现的目标：

const outerDiv      = document.getElementById('outer'),
      sizeDecrement = 20;

document.getElementById('boom').addEventListener('click', event => {
  let lastDiv = outerDiv,
      size    = 400;

  const interval = setInterval(() => {
    const div = document.createElement('div');
    div.className = 'inner ' + (size % (2 * sizeDecrement) === 0 ? 'even' : 'odd');
    [div.style.height, div.style.width] = [size + 'px', size + 'px'];

    lastDiv.append(div);
    lastDiv = div;
    
    size -= sizeDecrement;
    if (size < sizeDecrement) {
      clearInterval(interval);
    }
  }, 500);
});

.inner {
  align-items: center;
  display: flex;
  justify-content: center;
}
.inner.odd {
  background-color: chartreuse;
}
.inner.even {
  background-color: gold;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Kwadrat w kwadracie</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <button id="boom">Vamos!</button>
  <div id="outer"></div>
</body>

</html>

另外，关于你的代码：$(function () {是不必要的，因此使用了这么多的per-div样式而不是创建一个类并在样式表中给它们这些样式。

Answer 2

请参阅以下代码段。我希望它会有所帮助

var i = 0;                     
var w = 400;
var delay = 500;


$(function () {
    $("#boom").click(myLoop);
});

function myLoop () {    


   setTimeout(function () {    
      
      $( i === 0 ? 'body' : '#div'+(i-1)).append('<div id="div' + i + '" />');            
                
                    $("#div" + i + "").css({
                        "background-color": i % 2 === 0 ? "gold" : "chartreuse",
                        "position": "relative",
                        "z-index": i,
                        "top": i === 0 ? "20vw": "10px",
                        "left": i === 0 ? "20vw": "10px",
                    }).width(w).height(w);
      
      i++;
      w = w - 20
      
      if (w >= 20) {            
         myLoop();             
      }      
   }, delay)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="boom">Vamos!</button>
    <div id="outer"></div>

另见fiddle

的JavaScript。延迟div创建

2 个答案: